vue/cli3中环境变量配置详解

NO1024
139 阅读2分钟

问题：项目需要区分测试，预生产，生产环境，根据不同环境进行对应的逻辑操作
现状：只有production和development区分,所以需要做对配置文件进行相应的修改。

1.配置文件有：

.env 全局默认配置文件，不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件

2.命名规则：

属性名必须以VUE_APP_开头，比如VUE_APP_XXX

image.png

3.关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载

比如执行npm run serve命令，会自动加载.env.development文件

注意：.env文件无论是开发还是生成都会加载

image.png image.png 如上图所示，如过我们运行npm run serve 在就先加载.env文件，之后加载.env.development文件，两个文件有同一个项，则后加载的文件就会覆盖掉第一个文件，即.env.development文件覆盖掉了.env文件的NOOE_ENV选项。

同理如果npm run build 就执行了.env和.env.production。

4.配置package.json

image.png

如上图所示，scripts中test指令的键值--mode test 对应上新增的.env.test文件

新增的.env.test文件如图所示

image.png

这样就有了测试环境，如果在页面中需要判断当前环境，直接使用 process.env.VUE_APP_ENV 如果process.env.VUE_APP_ENV == 'test'则为测试环境，使用如下

const env = process.env.VUE_APP_ENV;
console.log('env',env);
let keyStr,ivStr
if(env == 'test'){
    keyStr = 'BF*ker7eCQouSoa~'
    ivStr = 'ElzKJm05IyIYgDZ9'
}else{
    keyStr = 'i_oQ4$RID^jRw(E$'
    ivStr = 'KWPSY#G+Sqr6B7pp'
}
  1. 补充 .env.development与.env.production的文件名修改

.env.development默认和serve命令对应，如何对应呢？其实就是相当于执行的指令为

"serve": "vue-cli-service serve --mode development",

只不过，变成了默认，就去掉了。 如果想改成其他名称，指令写成

"serve": "vue-cli-service serve --mode dev",

对应文件名称改为 .env.dev即可

avatar
文章
阅读
粉丝