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配置，無法直接修改打包文件，那么怎么區分不同的線上環境呢？ 也就是說npm run build時怎么手動更改process.env.NODE_ENV？

注意：

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

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

 

具體步驟如下： 

1.  package.json中打包命令：

{
  ···
  "scripts": {
    "serve": "vue-cli-service serve",    //本地運行，會把process.env.NODE_ENV設置為‘development’

    "alpha": "vue-cli-service build --mode alpha",   // 注意，這里 “--mode 名字“ 要和步驟2中文件名“.env.名字”名字保持一致
    
    "build": "vue-cli-service build --mode build" 
  },
  "dependencies": {
     ···    
  },
  ···
}

　　

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

NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'

　　

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

　　

3. 添加‘constans.ts’用來根據環境確定變量，其內容：let baseUrl: string = ""; //這里是一個默認的url，可以沒有

switch (VUE_APP_TITLE) {
    case 'alpha':   // 注意這里的名字要和步驟二中設置的環境名字對應起來
        baseUrl = "http://www.cnblogs.com/XHappyness/"  //這里是測試環境中的url
        break
    case 'production': baseUrl = "https://www.cnblogs.com/XHappyness/p/7686267.html"   //生產環境url
        break

    default: baseUrl = "http://localhost:57156/" //這里是本地的請求url

} export default baseUrl;

 

　　

4.在請求中引入設定的url，我這里用的是axiso，所以在axios的配置文件中引入並使用

import axios from 'axios'
import baseUrl from './constans'

axios.defaults.withCredentials = true;
axios.defaults.baseURL = baseUrl;

····

 

5.這樣，npm run alpha即打測試環境報，npm run build則打生產包

　

總結，這主要得益於在 vue-cli 3.0.x 里面支持 “.env” 文件配置； 如果還有其他線上環境要配置，根據上面添加測試環境（alpha）的步驟依次添加即可