vue项目配置多模式、多环境

1.多环境 就要配置多个 .env文件

比如开发环境 、测试环境、生产环境对应的就是
.env.dev-test:  NODE_ENV = 'dev'（冒号前面是文件名称，后面是文件里面写的内容）
.env.test:NODE_ENV = 'test'
.env.prod:NODE_ENV = 'prod'

到这里 需要新建的文件就结束了

2.配置package.json

默认打包命令是 npm run build ，所以你要打包不同环境就要不同的命令
“test”: “vue-cli-service build --mode test”,
“prod”: “vue-cli-service build --mode prod”,
“dev-test”: “vue-cli-service build --mode dev”

3.然后开始配置不同环境对应不同的请求前缀 ，也就是不同的域名或者ip地址，一般这个文件是放在config文件夹中你随便创建一个js文件。

你上面的三个 .env.xxx的文件里面已经更改了NODE_ENV的值，而这个NODE_ENV的值 其实就是process.env.NODE_ENV的值，所以你需要 if else-if 去分别判断文件里面复制的内容：
if (env.NODE_ENV == ‘dev’) {
baseUrl = ‘’
} else if (env.NODE_ENV == ‘prod’) {
baseUrl = ``; //生产环境地址
} else if (env.NODE_ENV == ‘test’) {
baseUrl = http://; //测试环境地址
}
其中这个baseUrl这边变量就是你要export 出去的变量

4.现在可以根据打包命令打包不同的环境了，那么baseUrl在那用呢？ 就在你的请求js文件里面用，baseUrl 加上接口名称 就是你要请求的完整连接。
学到了发个红包，其他文章有二维码。

到这里流程代码就结束了，下面简单讲解说一下

---

再说一下 mode这个单词，比较重要的

重点：它会覆写默认的模式，也就是上面的命令 --mode xxx 。后面跟你要复写的模式，比如你要prod模式，那就写 prod。

再就是 .env.xxx 这里的知识点：

重点:你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量.

说到这里你联想起来了吗？
--mode让你访问了指定的模式，而.env.xxx这个文件又让你把某个模式下的环境变量改了，然后你用改了的环境变量去做判断了。流程就是这样。理解万岁