vue-cli3實現分環境打包步驟（給不同的環境配置相對應的打包命令）

在vue-cli3的項目中，
npm run serve時會把process.env.NODE_ENV設置為‘development’；
npm run build 時會把process.env.NODE_ENV設置為‘production’；
此時只要根據process.env.NODE_ENV設置不同請求url就可以很簡單的區分出本地和線上環境。

打包時線上環境可能分多種，比如測試環境和生產環境等等。
在vue-cli2中打包時可以修改 “build” 和 “config”中的文件來區分不同的線上環境
而vue-cli3號稱0配置，無法直接修改打包文件，那么怎么區分不同的線上環境呢？

 

1.package.json添加命令"alpha"   

"scripts": {
  "dev": "vue-cli-service serve",
  "serve": "vue-cli-service serve",
  "alpha": "vue-cli-service build --mode alpha",
  "build": "vue-cli-service build --mode build",
  "lint": "vue-cli-service lint",
  "test:e2e": "vue-cli-service test:e2e",
  "test:unit": "vue-cli-service test:unit"
}

 

2. 在項目根目錄添加文件“.env.alpha”，其內容：

NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'

 

3.在項目根目錄添加文件“.env.build”，其內容：

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

 

例: 如在測試生產環境build時不壓縮js文件

4.vue.config.js

module.exports = {
  chainWebpack: config => {
    if(process.env.NODE_ENV === 'production') {
      // 測試生產環境, 不壓縮js代碼
      if (process.env.VUE_APP_TITLE === 'alpha') {
        config.optimization.minimize(false)
      }
    }
    config.resolve.alias
      .set('@', resolve('src'))
  }
}