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这个文件又让你把某个模式下的环境变量改了,然后你用改了的环境变量去做判断了。流程就是这样。理解万岁
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章