1、前言
cli3发布以来，vue搭建项目变得更加自定义了。项目结构也变得更加简洁明了。但是对于不同环境的配置也变得不一样了
2、介绍
官方默认两种类型 develpoment production,而我们实际开发过程中，会有本地开发，测试环境，正式环境等等，因而这两种环境变量是不够的，因而需要第三种乃至多种变量环境。官方也给出了解决方案。可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。
3、配置不同环境
首先我们在项目根目录下创建如下文件
.env.development
.env.production
.env.test
每个文件的具体内容
.env.development
/* VUE_APP_CURRENTMODE 当前环境变量 */
VUE_APP_CURRENTMODE = 'development'
VUE_APP_LOGOUT_URL = '自己的地址 '
.env.production
VUE_APP_CURRENTMODE = 'production'
VUE_APP_HOST_URL = ' '
.env.test
/* NODE_ENV 目的用于指定是一开发还是生产形式进行操作 test环境变量还是在development模式下*/
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_HOST_URL = ' '
package.json
"scripts": {
"serve:dev": "vue-cli-service serve --mode development",
"serve:prod": "vue-cli-service serve --mode production",
"serve:test": "vue-cli-service serve --mode test",
"lint": "vue-cli-service lint",
},
4、使用
在vue.config.js文件下对不同环境百年两下的设置代理
const devProxy = ['/api'] // 代理
let target = process.env.VUE_APP_HOST_URL
// 生成代理配置对象
let proxyObj = {}
devProxy.forEach((value) => {
proxyObj[value] = {
target: target,
changeOrigin: true,
pathRewrite: {
[`^${value}`]: value
}
}
})
module.exports = {
devServer: {
...
proxy: proxyObj,
...
},
}
