vue-cli的环境变量

为什么需要环境变量

在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对于不同的环境，有些配置项会有所差异。服务器地址、接口地址。。。
这个时候就需要环境变量和模式了

环境变量

cli-3.0总共提供了四种方式来制定环境变量：

• 在根目录添加.env文件，配置所有情况下都会用到的配置
• 在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪
• 在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。
• 在根目录添加.env.[mode].local文件，配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效，该文件不会被git跟踪

使用

在文件中，我们只需要以key=value的方式就可以设置变量了。
例如：

FOO=bar
VUE_APP_SECRET=secret

在项目中，也就是src中使用环境变量的话，必须以VUE_APP_ 开头。例如我们可以在main.js中直接输出：console.log(process.env.VUE_APP_SECRET)
如果你想要修改模式下默认的环境变量的话可以通过–mode来实现，例如：

“dev-build”：“vue-cli-service build --mode development”

举例子

1. 在package.json 添加

“scripts”: {
“build.test”: “vue-cli-service build --mode test”
}

2. 在跟目录下创建文件

.env.test
文件内:
VUE_APP_URL=https://test.baidu.cn

3. 当执行

npm run build.test

执行.env.test文件，文件内配置了VUE_APP_URL，此时无论哪个文件都可以通过调用 process.env.VUE_APP_URL，获取VUE_APP_URL的值。

同理可以依照上述方法继续创建其他文件，通过执行不同的 npm run[] 实现不同的VUE_APP_URL 配置，从而产生不同的环境配置