vue（vue-cli3）根据不同环境打包

配置环境

在项目根目录下创建两个文件：
.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’时和其他情况下打出的包存在不同，如果没有进行配置，可能项目无法运行。所以引入一个第三方变量，进行区分

更多环境

如果存在更多环境，按照以上配置，持续增加即可