https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E6%9E%84%E5%BB%BA
console.log(process.env.VUE_APP_***) // 環境變數
console.log(process.env.NODE_ENV) //環境

1.在vue-cli3的專案中，process.env.NODE_ENV 為當前環境

npm runserve時 process.env.NODE_ENV 為 ‘development’； //開發環境

npm run build時 process.env.NODE_ENV 為 ‘production’； //生產環境

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

但是在線上環境又分為 測試環境，預生產環境，生產環境，這時候就要在線上環境的條件下新增環境變數來區分

2.在專案根目錄新增檔案“.env.test”和“.env.pre”

所有測試環境或者正式環境變數的配置都在.env.development等.env.xxxx

注意！！！

環境變數必須以VUE_APP_為開頭。如:VUE_APP_API、VUE_APP_TITLE

你在程式碼中可以通過如下方式獲取環境變數:

console.log(process.env.VUE_APP_xxxx)

兩個檔案中

.env.test:

NODE_ENV = 'production'
VUE_APP_WISEYEAPP_ENV_NAME = 'test'      //環境變數

.env.pre

NODE_ENV = 'production'
VUE_APP_WISEYEAPP_ENV_NAME = 'pre'       //環境變數
VUE_APP_OUTPUT_DIR 
 
= 'preDist'

3. package.json中打包命令：

{
  ···
  "scripts": {
    "serve": "vue-cli-service serve",    //本地執行，會把process.env.NODE_ENV設定為‘development’
    "build：test": "vue-cli-service build --mode test",   // 注意，這裡 “--mode 名字“ 要和步驟2中檔名 “.env.名字” 名字保持一致
    "build：pre": "vue-cli-service build --mode pre" 
  },
  "dependencies": {
     ···    
  },
  ···
}

4. 然後 api/config.js裡

const BaseConfig = {
    dev: {
    BaseUrl: 'http://191.168.1.1/dev'
  },
    test: {
    BaseUrl: 'http://191.168.1.1/test'
  },
    pre: {
    BaseUrl: 'http://191.168.1.1/pre'
  }
}

let BaseUrlConfig = BaseConfig.dev
if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_WISEYEAPP_ENV_NAME === 'test') {        //區分環境和環境變數
    // 測試環境 
    BaseUrlConfig = BaseConfig.test 
} else if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_WISEYEAPP_ENV_NAME === 'pre') {

    // 預生產環境 
    BaseUrlConfig = BaseConfig.pre
} 

export default BaseUrlConfig

5. 專案裡 介面.js 檔案裡引用就好了

import request from '@/utils/request'
import BaseUrlConfig from '@/api/config'

或者 （在請求中引入設定的url，用的是axios，所以在axios的配置檔案中引入並使用）

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

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

····