vue cli 环境变量和模式

官网地址： 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. 怎么使用

怎么使用官网已经很清楚了，个人用到以下几个

1. 在根目录下创建 .env.test、.env.demo 等几个需要的环境文件；
2. 在环境文件中添加需要的变量（变量形如：key=value，key一定是VUE_APP_xx这样子的）
3. 在package.json中配置启动项 (–mode test，这个test就是模式，也就是.env.test这个test)
4. 在需要使用的地方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这个环境变量就可以了。