vue baseUrl多後端環境切換

系統運作環境

環境分類

一般一個項目至少有2-3個環境，最複雜的一套包括了

開發環境，開發者使用，配置較低，開發自測在此環境進行。

SIT測試環境，标準功能測試，聯調其他系統接口，調整功能bug

UAT測試環境，提供給使用者測試，提升使用者體驗，修複細微的bug

準生産環境，與生産環境基本一緻，用以準備生産環境版本及回歸測試

生産環境，釋出使用者使用的環境。

一般小項目也該有開發環境和測試環境兩種。

環境切換

後端可能有多個環境以适應測試的需要，前端一般不需要太多環境，這個時候就需要來連接配接不同的環境的後端，直接改位址再重新開機總是會有忘記改回來的時候，這個時候上生産就很可能導緻爆炸，是以在前端定義多套環境，在編譯階段就解決掉這種風險。

vue多環境配置

在根目錄建立.env環境配置檔案

對應環境的命名規則：

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 隻在指定的模式中被載入
.env.[mode].local   # 隻在指定的模式中被載入，但會被 git 忽略
           

.env.development對應開發環境

.env.test 對應測試環境

.env.production 對應生産環境

如果還有其他環境可以繼續添加。

配置檔案内容

配置檔案内容規範是鍵值對 key = value 的形式，對應的變量命名可以大小寫都随意，但一般都是大寫。環境變量一般包括

ENV、NODE_ENV 環境辨別

VUE_APP 開頭的環境變量可以在代碼中直接使用

.env.development内容如下

# 開發環境配置
ENV = 'dev'
NODE_ENV = 'dev'

# 開發環境端口
port = 80

# 開發環境
VUE_APP_BASE_API = '/dev-api'

# 路由懶加載
VUE_CLI_BABEL_TRANSPILE_MODULES = true
           

# 測試環境配置
ENV = 'test'
NODE_ENV = 'test'

# 測試環境
VUE_APP_BASE_API = '/test-api'
           

# 生産環境配置
ENV = 'prod'
NODE_ENV = 'prod'

# 生産環境
VUE_APP_BASE_API = '/prod-api'
           

每個環境一般有不同的位址，端口，還有對應的請求url，配置檔案的内容一般就包含這些變量。

配置啟動項

在package.json中可以配置對應環境的啟動

–mode 代表對應的模式，比如test 對應為測試環境，vue對應就加載.env.test檔案中的配置。

配置vue.config.js

可根據配置加載不同的端口

const port = process.env.port || 80
           

在vue.config.js中添加proxy，将對應url的請求攔截發送至target的位址

devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  },
           

這也是将對應環境的請求，根據 VUE_APP_BASE_API 攔截發送至指定環境。

axios請求封裝

封裝axios請求，将每個請求帶上環境的公共請求url，這樣在proxy中就可以攔截對應環境的請求。

mock請求

在mock中也引用process.env.VUE_APP_BASE_API對應環境公共url，可讓在測試的接口發送至mock

/* 可配置切換環境 */
let baseUrl = process.env.VUE_APP_BASE_API;
console.log(baseUrl)

Mock.mock(`${baseUrl}/testPost`,'post',{
  "string|1-10": "★"
})