本文主要介绍了在vue中设置环境变量的全过程，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue设置环境变量创建不同的环境变量文件将内容添加到。env文件使用多个环境变量在package.json中添加对应不同环境的执行语句什么是多个环境变量？配置过程
vue设置环境变量
在开发的时候，一般有三个环境：开发环境、测试环境、上线环境。
vue 中有个概念就是模式，默认先vue cli 有三个模式
Vue-Vue-CLI-服务服务的开发模式Vue-CLI-服务构建和Vue-CLI-服务测试的生产模式：Vue-CLI-服务测试的e2etest模式：单位
但是往往开发的时候可能不止有三种：
本地环境(本地)开发环境(开发)测试环境(开发测试)预发布环境(测试版)生产环境(生产)
链接：配置环境变量
创建不同环境变量文件
正如官方文件所说，通过在。env文件中，设置了特定模式特有的环境变量。我这里有5个环境，所以我配置了5个。环境文件。如下图：
给.env文件添加内容
基本格式如下：
NODE_ENV=环境名称VUE _应用程序_URL=相应的环境地址
我的本地环境的配置如下图所示：
我在本地使用easy-mock模拟数据，所以配置的地址是模拟接口地址。
在package.json中添加不同环境对应的执行语句
正如官方文件所说，通过passing - mode可以配置不同的模式。我自己的项目配置如下：
使用
文件已经创建，配置语句已经编写。怎么用？
您可以在主页上执行您需要的环境的命令语句。
例如，如果我现在需要一个本地环境，我将执行npm run local-serve。
如下图所示：
然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。
例如，在axios请求中，我们可以将其baseURL设置为process.env.VUE_APP_URL
如下图所示：
如果你不确定自己现在处于哪个环境变量，可以看一下console.log("当前环境变量：" process.env.NODE_ENV ")和console.log("当前环境路径：" process.env.VUE_APP_URL ")。
总之，你需要哪个环境变量，只要【npm run对应的环境变量】就搞定了！
多环境变量
什么是多环境变量？
项目运行时，会根据启动指令运行不同的环境。在不同的环境下，我们配置相应的所需变量来满足我们的开发需求，这就是所谓的多环境变量。
一般环境分为开发环境、测试环境和生产环境。
配置流程
1、在项目根目录下的package.json中配置serve test build
通过-modexxx执行不同的环境。
脚本':{
'发球':' vue-CLI-发球-开球'，
测试':' vue-CLI-服务构建模式测试'，
build ':' vue-CLI-服务版本'，
}
open运行时自动打开页面。
通过npm run serve启动本地，通过npm run test包测试执行开发，通过npm run build包正式执行测试，执行生产。
2、在项目根目录下创建.env.*文件。env.development本地开发环境配置
NODE_ENV='开发'。env.production正式环境配置
NODE_ENV='生产'。测试环境配置
NODE_ENV='生产'
3.在src下面创建一个config文件夹下面配置三个相对应的的js
重新配置三是因为修改方便，不需要重启项目，符合开发习惯。
//根据环境引入不同的配置process.env.NODE_ENV
const config=require('。/env。process.env.NODE_ENV)
模块.导出=配置
配置与环境相对应的变量。以本地环境文件env.development.js为例。用户可以根据需要进行修改。
//本地环境配置
模块.导出={
标题：“vue-H5-模板”，
基本URL:“3358 localhost:9018”，//项目地址
基本API:' https://test.xxx.com/API',//local API请求地址
APPID:“XXX”，
app secret:“XXX”
}
4.在我们根目录下的src文件内main.js文件中引入
从“”导入{baseUrl}。/config/index '；
//因为导出的对象是对象，所以结构被赋值。
console . log(base URL)；
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。