vue-cli 3.0 分多環境打包配置

分環境來打包：

• 開發環境
• 測試環境
• 正式環境

配置文件

• .env.dev

• .env.web1

• .env.web2

   沒有這三個文件的在根目錄自己創建就可以

 

看看每個env文件中寫的東西

• .env.dev 開發環境

NODE_ENV = 'dev' VUE_APP_CURENV = 'dev'

• .env.web1 測試環境

NODE_ENV = 'test' VUE_APP_CURENV = 'web1'

• .env.web2 生產環境

NODE_ENV = 'pro' VUE_APP_CURENV = 'web2'

 

我們在上方的env里寫的代碼是干嘛用的呢，

我們使用  process.env.VUE_APP_CURENV  可以獲取 VUE_APP_CURENV = 'web1’ 的值，用來定義我們不同環境的接口

 

let baseUrl = ''
switch (process.env.VUE_APP_CURENV) {
  case 'dev':
    baseUrl = $config.apiUrl.dev
    break
  case 'web1':
    baseUrl = $config.apiUrl.web1
    break
  case 'web2':
    baseUrl = $config.apiUrl.web2
    break
}
console.log(baseUrl)

 

使用方法

 

你在指令中 使用

• npm run build:dev  // 打包開發環境
• npm run build:web1  // 打包測試環境
• npm run build:web2   // 打包生產環境

 

補充：

注意 vue.config.js 中，根據不同環境調整發布目錄，否則會引起一系列問題

（比如：打包后線上環境一刷新就404，瀏覽器直接輸入地址一片空白等問題）

 

可以在 vue.config.js 的

module.exports = { } 加入一行代碼，打包后輸出不同環境的文件夾： ‘dest-dev’ / 'dist-web1' / 'dist-web2'

outputDir: `dist-${process.env.VUE_APP_CURENV}`, // 不同環境輸出不同打包目錄