vue——vue-cli3項目打包時區分環境以及環境變量undefined問題解決

參考：vue-cli3實現分環境打包步驟（給不同的環境配置相對應的打包命令） - ฅ˙-˙ฅ - 博客園 (cnblogs.com)

　　    模式和環境變量 | Vue CLI (vuejs.org)

　　　Vue cli3.0環境配置所遇到的問題_BertKing的專欄-CSDN博客

 

我的情況：除了開發環境development和生產環境production外，還有一個測試環境test，需要在打包時進行區分，修改請求地址

 

前言

在vue-cli3的項目中，

npm run serve時會把process.env.NODE_ENV設置為‘development’；

npm run build 時會把process.env.NODE_ENV設置為‘production’；

此時只要根據process.env.NODE_ENV設置不同請求url就可以很簡單的區分出本地和線上環境。

注意：

其實通過改變process.env.NODE_ENV值區分打包環境是有問題的，因為webpack打包時針對process.env.NODE_ENV===‘production’和其他情況打出來的包結構和大小都不一樣；

為了消除這種差異，可以使用其他變量比如process.env.VUE_APP_TITLE來區分環境

 

區分環境

1.修改packge.json文件

{
  ···
  "scripts": {
    "serve": "vue-cli-service serve", // 本地運行，會把process.env.NODE_ENV設置為‘development’
    "buildTest": "vue-cli-service build --mode test", // 注意，這里 “--mode 名字“ 要和步驟2中文件名“.env.名字”名字保持一致
    "build": "vue-cli-service build --mode production" 
  },
  "dependencies": {
     ···    
  },
  ···
}

 

2.在項目根目錄（注意一定要是根目錄下，不是src下）添加文件“.env.test”和“.env.production”（注意不是js文件），其內容分別為：

.env.test

NODE_ENV=production
VUE_APP_TITLE=test

.env.production

NODE_ENV=production
VUE_APP_TITLE=production

NODE_ENV=production是為了確保測試環境和生產環境打出來的包結構和大小都一樣

VUE_APP_TITLE是環境變量，只有以 VUE_APP_  開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中

 

3.二次封裝axios根據環境變量修改請求地址

...

// 環境的切換
let apiBaseUrl = '';
switch (process.env.VUE_APP_TITLE) {
  case 'production':
    apiBaseUrl = 'xxx'
    break
  case 'test':
    apiBaseUrl = 'xxx'
    break
  default:
    apiBaseUrl = 'xxx'
    break
}
// 創建 axios 實例
const service = axios.create({
  baseURL: apiBaseUrl,
  timeout: 9000, // 請求超時時間
})

...

 

4.打包

執行命令：npm run build   打生產環境包

執行命令：npm run buildTest   打測試環境包

 

出現的問題

執行console.log(process.enc.WUE_APP_TITLE)，控制台打印為undefined

原因：.env.test和.env.production文件未放在根目錄下