官网地址: https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
1. 为什么要使用
我们在开发中,要调用本地服务,测试服务,demo服务,线上服务。之前的操作都是在一个js重全部定义了,用哪个放开哪个,其余注释掉。代码如下:
// let url = "127.0.0.1:8090/project";
// let url = "192.168.0.1/project" ;
// let url = "https://demo.com/project";
// let url = "https://develop.com/project";
let url = "https://prodection.com/project";
然后根据发布到哪个环境,不注释哪个;经常改动,有时改动忘记恢复给push到gitlab导致同事代码冲突了;比较麻烦;
2. 怎么使用
怎么使用官网已经很清楚了,个人用到以下几个
- 在根目录下创建 .env.test、.env.demo 等几个需要的环境文件;
- 在环境文件中添加需要的变量(变量形如:key=value,key一定是VUE_APP_xx这样子的)
- 在package.json中配置启动项 (–mode test,这个test就是模式,也就是.env.test这个test)
- 在需要使用的地方process.env.xx就可以使用了,我就在之前定义url的地方改为 let url = process.env.VUE_APP_URL;
下面是一个例子:
.env.test 环境文件
NODE_ENV=dev
VUE_APP_URL=https://develop.com/firm
package.json scripts里添加
"scripts": {
"serve:test": "vue-cli-service serve --open --mode test",
"build:test": "vue-cli-service build --mode test"
}
serve:test 本地以test模式启动;build:test 以test模式打包
然后代码里面 process.env 这个对象里面就可以看到你定义的属性了;
3. 官网两个问题的理解
Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 .env 文件覆写。
如果环境文件为 .env.test ,执行 npm run serve:test 时,.env.test 里面定义的环境变量就是已经存在的环境变量,他们拥有最高优先级。.env 里面的环境变量在所有的环境中都被载入,但是优先级最低。环境文件默认有个变量 NODE_ENV ,.env.test 就为test,.env.demo 就为demo 他的优先级也比 .env 里面定义的高 。
如果在环境中有默认的 NODE_ENV,你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。
这句话暂时不知道为什么,那就按他说的做吧,就是在环境文件中都要添加NODE_ENV这个环境变量就可以了。