Vue cli3配置生産環境，開發環境，和測試環境

目錄

• 前言
• 1、先在package.json檔案中添加：
• 2、在項目目錄下建立 .env檔案和.env.test檔案
• • 2.1、.env檔案
  • 2.2、.env.test檔案
  • 2.3、在vue.config.js檔案中添加：
• 3、配置api變量
• • 3.1、配置axios的baseURL路徑
  • 3.2、自己拼接的路徑
• 4、.env知識點補充
• • 4.1，關于檔案名：必須以如下方式命名，不要亂起名，也無需專門手動控制加載哪個檔案
  • 4.2，關于内容
  • 4.3，關于檔案的加載：
  • 4.4，關于.env檔案的讀取：

前言

通過不同指令行切換不同環境api等資訊

例如：

npm run serve調用本地環境api

npm run test 調用測試環境api

npm run build 調用線上環境api

1、先在package.json檔案中添加：

"test": "vue-cli-service build --mode test" 
           

知識點補充：

參數的名字可以根據跟人喜好來定義

vue cli 3 serve是運作代碼。build是打包代碼

而我們打包的時候，就把serve運作變成開發環境，build打包變成生産環境。

—mode後面添加test，是運作.env.test

沒有加的情況下，serve是自動預設.env.development build是自動預設.env.production

2、在項目目錄下建立 .env檔案和.env.test檔案

2.1、.env檔案

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'
           

2.2、.env.test檔案

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test  //outputDir：打包時的輸出目錄名字，若需預設輸出到dist目錄，則可不寫該變量
           

知識點補充：

請看4

2.3、在vue.config.js檔案中添加：

outputDir: process.env.outputDir, 
           

3、配置api變量

這裡配置需要因代碼而異

3.1、配置axios的baseURL路徑

那麼我們需要在main.js裡面，配置axios的baseURL,根據不同的環境配置不同的代碼

/*第一層if判斷生産環境和開發環境*/
if (process.env.NODE_ENV === 'production') {
    /*第二層if，根據.env檔案中的VUE_APP_FLAG判斷是生産環境還是測試環境*/
    if (process.env.VUE_APP_FLAG === 'pro') {
        //production 生産環境
        axios.defaults.baseURL = 'http://api.xinggeyun.com';
 
    } else {
        //test 測試環境
        axios.defaults.baseURL = 'http://192.168.0.152:8102';
 
    }
} else {
    //serve 開發環境
    axios.defaults.baseURL = 'http://192.168.0.152:8102';
}
           

3.2、自己拼接的路徑

文法和上面的文法是一樣的，根據process.env.NODE_ENV判斷環境，然後修改基礎路徑，在進行拼接

/*第一層if判斷生産環境和開發環境*/
if (process.env.NODE_ENV === 'production') {
    /*第二層if，根據.env檔案中的VUE_APP_FLAG判斷是生産環境還是測試環境*/
    if (process.env.VUE_APP_FLAG === 'pro') {
        //production 生産環境
        var baseUrl = 'https://www.xxxxxx.com/api/';
    } else {
        //test 測試環境
        baseUrl = 'http://test.xxxxx.com:9999/api/';
 
    }
} else {
    //serve 開發環境
    baseUrl = 'http://192.168.4.17:8069/b2b/api/';
}
           

4、.env知識點補充

4.1，關于檔案名：必須以如下方式命名，不要亂起名，也無需專門手動控制加載哪個檔案

.env 全局預設配置檔案，不論什麼環境都會加載合并

.env.development 開發環境下的配置檔案

.env.production 生産環境下的配置檔案

4.2，關于内容

注意：屬性名必須以VUE_APP_開頭，比如設定其它變量 VUE_APP_NAME=stark

4.3，關于檔案的加載：

根據啟動指令vue會自動加載對應的環境，vue是根據檔案名進行加載的，是以上面說“不要亂起名，也無需專門控制加載哪個檔案”

　　比如執行npm run serve指令，會自動加載.env.development檔案

注意：.env檔案無論是開發還是生成都會加載的公用檔案

如過我們運作npm run serve 在就先加載.env檔案，之後加載.env.development檔案，兩個檔案有同一個項，則，後加載的檔案就會覆寫掉第一個檔案，也即是.env.development檔案覆寫掉了.env檔案的NOOE_ENV選項。

如果我們需要加載私有的情況下，可以像test一樣，-mode test ，當我們運作的時候，就是運作env.test檔案

4.4，關于.env檔案的讀取：

可以通過 process.env 擷取設定的變量