詳解vue-cli4環境變數與分環境打包方法

linmu發表於2020-01-05
Vue變數

此篇文章會先講具體操作步驟，後面會介紹原理，如時間緊急只看第一部分即可

具體步驟（以測試環境模式為例）

修改package.json

在scripts裡新增一行命令

"test":"vue-cli-service build --mode test"
複製程式碼

新增.env.test檔案

在專案根據經建立.env.test檔案，內容：

NODE_ENV='production'  // 表明這是生產環境（需要打包）
VUE_APP_CURRENTMODE='test'  // 表明生產環境模式資訊
VUE_APP_BASEURL='http://localhost:8080'  // 測試伺服器地址
複製程式碼

修改專案中的api介面檔案，或者在自己建的config資料夾裡修改，或者直接在跨域代理部分修改，根據個人喜好而定。（以api為例）

專案中一般會建立一個api.js來管理所有的介面URL，因在本地開發中是通過代理來連線伺服器的，所以可將url寫成：

`${baseUrl}/api/getUserInfo`
複製程式碼

檔案開頭通過環境變數改變baseUrl

let baseUrl = ''
if (process.env.NODE_ENV === 'development') { // 開發
  baseUrl = ''
} else if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_CURRENTMODE === 'test') { // 測試
  baseUrl = process.env.VUE_APP_BASEURL
} else { // 生產
  baseUrl = ''
}
複製程式碼

打包

當需要在測試環境下進行測試時，執行指令打包

npm run test
or
cnpm run test
複製程式碼

基本原理介紹

瞭解環境變數概念

我們可以在根目錄的下列檔案中指定環境變數：

.env  // 在所有的環境中被載入
.env.local  // 在所有的環境中被載入，但會被git忽略
.env.[mode]  // 只在指定的模式中被載入，上述例子屬於此型別
.env.[mode].local  // 只在指定的模式中被載入，但會被git忽略
複製程式碼

環境變數檔案中只包含環境變數的“鍵=值”對：

NODE_ENV='production'  
VUE_APP_CURRENTMODE='test'  // 只有VUE_APP開頭的環境變數可以在專案程式碼中直接使用
複製程式碼

除了自定義的VUE_APP_*變數之外，還有兩個在應用中始終可用的變數：

  • NODE_ENV - 會是 "development"、"production" 或 "test"中的一個。具體的值取決於應用執行的模式。
  • BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。 為一個特定模式準備的環境檔案 (例如 .env.production) 將會比一般的環境檔案 (例如 .env) 擁有更高的優先順序。

模式概念

一般情況下Vue Cli有三個預設模式：

  • development 模式用於 vue-cli-service serve
  • production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用於 vue-cli-service test:unit 模式不等於NODE_ENV，一個模式有多個環境變數。即每個模式都可將NODE_ENV的值設定為模式的名稱（可重新賦值更改），比如在development模式下NODE_ENV的值會被設定為“development”。 你可以通過為 .env 檔案增加字尾來設定某個模式下特有的環境變數。比如，如果你在專案根目錄建立一個名為 .env.development 的檔案，那麼在這個檔案裡宣告過的變數就只會在 development 模式下被載入。 你可以通過傳遞 --mode 選項引數為命令列覆寫預設的模式。例如，如果你想要在構建命令中使用開發環境變數，請在你的 package.json 指令碼中加入：
"dev-build": "vue-cli-service build --mode development",
複製程式碼

環境變數的使用

只有以 VUE_APP_ 開頭的變數會被 webpack.DefinePlugin 靜態嵌入到客戶端的包中(即在專案程式碼中使用)。你可以在應用的程式碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)
複製程式碼

理解指令，模式，環境變數之間的關係

我們在package.json中經常看到這樣的指令：


  "scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
複製程式碼

在一個 Vue CLI 專案中，@vue/cli-service 安裝了一個名為 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service，或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。

vue-cli-service serve 用法：vue-cli-service serve [options] [entry] 選項： --open 在伺服器啟動時開啟瀏覽器 --copy 在伺服器啟動時將 URL 複製到剪下版 --mode 指定環境模式 (預設值：development) --host 指定 host (預設值：0.0.0.0) --port 指定 port (預設值：8080) --https 使用 https (預設值：false)

vue-cli-service build 用法：vue-cli-service build [options] [entry|pattern] 選項： --mode 指定環境模式 (預設值：production) --dest 指定輸出目錄 (預設值：dist) --modern 面向現代瀏覽器帶自動回退地構建應用 --target app | lib | wc | wc-async (預設值：app) --name 庫或 Web Components 模式下的名字 (預設值：package.json 中的 "name" 欄位或入口檔名) --no-clean 在構建專案之前不清除目標目錄 --report 生成 report.html 以幫助分析包內容 --report-json 生成 report.json 以幫助分析包內容 --watch 監聽檔案變化

以上是常用的cli指令，預設對應development和production模式，如需瞭解更多，請訪問：Vue Cli 服務

你的贊是我前進的動力

求贊，求評論，求轉發...

相關文章