配置环境
在项目根目录下创建两个文件:
.env.test
NODE_ENV = 'production'
VUE_APP_ENV = 'test'
.env.build
NODE_ENV = 'production'
VUE_APP_ENV = 'production'
修改package.json
"scripts": {
"serve": "vue-cli-service serve",
"test": "vue-cli-service build --mode test",
"build": "vue-cli-service build --mode build"
},
–mode 后面的内容需要与.env.名字 相同,这是vue-cli 3暴露的配置项
根据环境指定url
let baseUrl = ''
let curEnv = process.env.VUE_APP_ENV || 'development'
// case中的值需要与env文件中配置的值一致
switch (curEnv) {
case 'development':
// 开发环境
baseUrl = 'http://127.0.0.1:9999'
break
case 'test':
// 测试环境
baseUrl = 'https://a.b.com/api'
break
case 'production':
// 生产环境
baseUrl = 'https://c.d.com/api'
break
}
module.exports = {
baseUrl
}
为什么不直接使用NODE_ENV进行修改和判定?
通过NODE_ENV区分打包环境存在问题,webpack打包在NODE_ENV=='production’时和其他情况下打出的包存在不同,如果没有进行配置,可能项目无法运行。所以引入一个第三方变量,进行区分
更多环境
如果存在更多环境,按照以上配置,持续增加即可