場景

在開發(fā)過程中，通常會遇到這樣的問題：

在開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境中我們會用到不一樣的服務(wù)接口

在生產(chǎn)環(huán)境出現(xiàn)了出現(xiàn)了某個(gè)bug，但是在測試環(huán)境不存在，這時(shí)候就需要開發(fā)環(huán)境訪問生產(chǎn)環(huán)境的接口

多端一體的項(xiàng)目模式

這些情況都要手動去切換接口地址，這樣會很麻煩，有時(shí)還可能出現(xiàn)操作失誤。

這時(shí)候就需要用到cross-env進(jìn)行分環(huán)境配置了，根據(jù)不同的環(huán)境，我們使用對應(yīng)的接口，這樣也就不用手動去操作。

第一步 安裝依賴 cross-env

使用 cross-env 解決跨平臺問題。

在終端運(yùn)行：

npm install cross-env --save-dev  // 安裝 cross-env 依賴

第二步 修改 package.json 文件

在 package.json 中 scripts 屬性中 build 命令替換為：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "cross-env vue-cli-service build --mode test",
    "build:prod": "cross-env vue-cli-service build --mode production",
},

當(dāng)我們需要配置多個(gè)環(huán)境變量時(shí)，未避免package.json命令過長，這時(shí)候就可以選擇模式配置

默認(rèn)模式

vue-cli項(xiàng)目下默認(rèn)有三種模式：

• development模式：在 vue-cli-service serve 時(shí)使用。
• production模式：在 vue-cli-service build 和 vue-cli-service test:e2e 時(shí)使用。
• test模式：在 vue-cli-service test:unit 時(shí)使用。

每個(gè)模式都會將 NODE_ENV設(shè)置為模式的名稱，比如在development模式下，NODE_ENV為 ‘development’。

自定義模式

自定義模式需要通過.env文件進(jìn)行配置，.env文件分為以下類型：

• .env，在所有的環(huán)境中被載入
• .env.local，在所有的環(huán)境中被載入，但會被 git 忽略
• .env.[mode]，只在指定的模式中被載入
• .env.[mode].local，只在指定的模式中被載入，但會被 git 忽略
• [mode] 是自定義的模式名稱

例：通過在package.json腳本中增加 --mode [mode]來指定模式。

// package.json
{
  "scripts": {
      "build:testing": "cross-env vue-cli-service build --mode testing",
  }
}

第三步 創(chuàng)建不同環(huán)境的文件

在項(xiàng)目根目錄新建  .env.development文件：

// 開發(fā)環(huán)境模式 
// 環(huán)境變量
NODE_ENV=development
// 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中
VUE_APP_ENV = 'development'

在項(xiàng)目根目錄新建  .env.test文件：

// 測試環(huán)境模式
// 環(huán)境變量（這里的環(huán)境變量是跟打包有關(guān)的，production則會進(jìn)行壓縮代碼等，真正跟每個(gè)環(huán)境有關(guān)的變量是下面以VUE_APP開頭的變量）
NODE_ENV=test
// 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中
VUE_APP_ENV = 'test'

在項(xiàng)目根目錄新建  .env.production文件：

// 線上環(huán)境模式
// 環(huán)境變量
NODE_ENV=production
// 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中
VUE_APP_ENV = 'production'

第四步 根據(jù)配置進(jìn)行判斷使用不同的環(huán)境服務(wù)

let baseUrl = '';
let env = process.env;
 
if (env.VUE_APP_ENV === 'development') {
    baseUrl = `http://xxx/`; // 本地服務(wù)地址
} else if(env.VUE_APP_ENV === 'production'){
    baseUrl = `http://xxx/`; // 正式環(huán)境服務(wù)地址
}else if(env.VUE_APP_ENV === 'test'){
    baseUrl = `http://xxx/`; // 測試環(huán)境服務(wù)地址
}
export {
    baseUrl,
    env
}

第五步 打包項(xiàng)目

// 測試環(huán)境打包項(xiàng)目
npm run build:test
 
// 生產(chǎn)環(huán)境打包項(xiàng)目
npm run build:prod

結(jié)果測試：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論