在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）的步驟依次添加即可

靈感來源：http://blog.mttqq.cn/archives/660

本文是作者獨創原文，轉載請標明出處。

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