vue-cli3打包時vue-cli-service build怎么分不同環境

在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？

 

廢話不說了，具體步驟如下： 

1.  package.json添加  "alpha": "vue-cli-service build --mode alpha"

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


    "alpha": "vue-cli-service build --mode alpha",  
    // 打包，會把process.env.NODE_ENV設置為步驟2中‘.env.alpha’文件設置的值。
    // 注意，這里 “--mode 名字“ 要和步驟2中文件名“.env.名字”名字保持一致
    

     "build": "vue-cli-service build"    //打包， 會把process.env.NODE_ENV設置為‘production’
  },
  "dependencies": {
     ···    
  },
  ···
}

　　

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

NODE_ENV = ‘alpha‘

　　

3. 添加‘setBaseUrl.ts’用來設置url，其內容：

let baseUrl: string = "";   //這里是一個默認的url，可以沒有
switch (process.env.NODE_ENV) {
    case ‘development‘:
        baseUrl = "http://localhost:57156/"  //這里是本地的請求url
        break
    case ‘alpha‘:   // 注意這里的名字要和步驟二中設置的環境名字對應起來
        baseUrl = "http://www.cnblogs.com/XHappyness/"  //這里是測試環境中的url
        break
    case ‘production‘:
        baseUrl = "https://www.cnblogs.com/XHappyness/p/7686267.html"   //生產環境url
        break
}

export default baseUrl;

 

　　

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

import axios from ‘axios‘
import baseUrl from ‘./setBaseUrl‘

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

····

 

　

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