前言

為什么會需要配置多種環(huán)境變量？

在一個產(chǎn)品的開發(fā)過程中，一般來說都是會經(jīng)歷這么一個過程：本地開發(fā) → 測試版部署 → 測試 → 預上線 → 正式上線。對應的每一個環(huán)節(jié)中的服務器地址，接口地址...都會不一樣。那么我們需要怎么去處理這種情況。

一. 如何配置環(huán)境變量

1. 創(chuàng)建文件

在 vue-cli4 的腳手架構建的項目根目錄中新建一個 .env.[model] 文件，model 為一個變量，可以通過這個 model 的變量值來判斷當前屬于哪個環(huán)境。model 可以根據(jù)你的需求來修改, 該文件中寫上對應的鍵值對。你需要多少個環(huán)境，就創(chuàng)建多少個 .env.[model] 在根目錄中，文件如下圖。

# 預發(fā)環(huán)境
.env.beta
# 開發(fā)環(huán)境
.env.development
# 生產(chǎn)環(huán)境
.env.production
# 測試環(huán)境
.env.test

簡單說明一下，為什么要創(chuàng)建四個文件

首先我們創(chuàng)建的文件名必須是 .env.xxx，.env.xxx 文件的 xxx 必須是和 package.json 里的 script 對象內部的命令一致。

舉個例子：

我們創(chuàng)建了 .env.test 這個文件，那么我們配置的打包命令 build:test 的值 "vue-cli-service build --mode test"，--mode 后面的 test 必須跟文件 .env.test 一致，這樣我們打包命令才會找到環(huán)境變量文件里面配置的參數(shù) "build:test": "vue-cli-service build --mode test"

請注意?。?！

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側的代碼中。這是為了避免意外公開機器上可能具有相同名稱的私鑰。

2. 環(huán)境變量文件說明

現(xiàn)在我們來到配置文件，這個配置文件的功能是為了判斷當前打包環(huán)境是生產(chǎn)還是測試，或者本地，當然你也可以有很多的環(huán)境。在配置文件中我們通過 process.env.VUE_APP_BASE_URL 這個全局字段去判斷環(huán)境， 然后將對應的接口地址匹配上。注意一點，上面的 NODE_ENV = "production" 不可以省略，vue-cli 4.0 及之后的版本會根據(jù) NODE_ENV = "production" 來判斷是否生產(chǎn)環(huán)境，如果你改變了這個就會被默認 NODE_ENV = "development"，development 和 production 模式下打包出來的包結構會不同，為了一致性，所以配置文件的第一個字段應該設置為 NODE_ENV = "production"。

.env.test (測試環(huán)境變量)

NODE_ENV = "test"
VUE_APP_BASE_URL = "接口請求測試地址"
VUE_APP_API = "接口請求測試地址"

.env.production （正式環(huán)境變量）

NODE_ENV = "production"
VUE_APP_BASE_URL = "接口請求正式地址"
VUE_APP_API = "接口請求正式地址"

.env.beta (預發(fā)環(huán)境變量)

NODE_ENV = "beta"
VUE_APP_BASE_URL = "接口請求預發(fā)地址"
VUE_APP_API = "接口請求預發(fā)地址"

.env.development (開發(fā)環(huán)境變量)

NODE_ENV = "development"
VUE_APP_BASE_URL = "/api"  // vue 跨域代理配置的標識
VUE_APP_API = "測試環(huán)境地址"

說明一下開發(fā)環(huán)境變量文件 VUE_APP_BASE_URL 的值指向的是我們在 vue.config.js 配置的跨域代理的字符串標識.

module.exports = {
  publicPath: './',
  devServer: {
    proxy: {
      '/api': {
        target: '接口請求測試地址', // API 服務器的地址
        ws: true,  // 代理 websockets
        changeOrigin: true, // 虛擬的站點需要更管 origin
        pathRewrite: {   // 重寫路徑 比如 '/api/aaa/ccc' 重寫為 '/aaa/ccc'
          '^/api': ''
        }
      }
    }
  }
}

3. 配置打包命令

package.json 文件下的腳本：

{
  "script": {
    "dev": "vue-cli-service serve && webpack-dev-server --open --mode dev",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
    "build:beta": "vue-cli-service build --mode beta",
    "build:test": "vue-cli-service build --mode test"
  }
}

上面提到創(chuàng)建的 .env.[model] 文件，文件名中的 model 對應 package.json 文件中的打包腳本 --model [model]。

例如我現(xiàn)在想打包正式環(huán)境，正式環(huán)境對應 .env.[model] 就是 .env.prop。

在 package.json 的 script 中添加 "build:prod": "vue-cli-service build --mode production"，其中 production 這個對應配置文件名的 mode，這樣 webpack 打包的時候會自動跟蹤到這個文件，并去讀取其中的各種配置字段， 我們在項目中任意位置就可以通過 process.env.xx 拿到其中 xx 配置屬性。

現(xiàn)在我們只需要運行對應的腳本命令就可以打包對應環(huán)境的項目代碼。例如：我現(xiàn)在想打包 production 環(huán)境下的項目，在控制臺運行 npm run build:prod，就可以執(zhí)行正式環(huán)境打包。運行 npm run build:dev，則可以打包測試環(huán)境，該模式也可用于自動化部署。

綜上所述，vue-cli4.x版本的打包命令和環(huán)境變量就配置完成了。

到此這篇關于vue-cli4 配置不同開發(fā)環(huán)境打包命令的文章就介紹到這了,更多相關vue-cli4 打包命令內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！