目錄
1.為什么配環境變數
2.根目錄下創建以下形式的檔案進行不同環境下變數的配置：
如何使用:
3.環境變數的默認值和自己添加環境變數
打包環境
這是解釋篇,如果要看直接使用,則跳轉 這里
1.為什么配環境變數
在實際專案的開發中，我們一般會經歷專案的開發階段、測驗階段和最終上線階段，每一個階段對于專案代碼的要求,和基地址可能都不盡相同,所以就引出了環境變數,動態識別我們的環境,在不同的生產環境下可以使用相應的配置變數
一般一個專案都會有以下 3 種環境：
- 開發環境（開發階段，本地開發版本，一般會使用一些除錯工具或額外的輔助功能）
- 測驗環境（測驗階段，上線前版本，除了一些 bug 的修復，基本不會和上線版本有很大差別）
- 生產環境（上線階段，正式對外發布的版本，一般會進行優化，關掉錯誤報告）
就以打包發布生產為例子，每次使用開發環境的介面除錯完，打包的時候總要找到請求檔案，去更改為線上地址然后打包,這樣處理起來就會很麻煩
2.根目錄下創建以下形式的檔案進行不同環境下變數的配置：
.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入 如 ：production 和 development
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略如何使用:
創建一個名為 .env.stage 的檔案，該檔案表明其只在 stage 環境下被加載，在這個檔案中，我們可以配置如下鍵值對的變數：
NODE_ENV=stage VUE_APP_TITLE=stage mode在專案中，我們該如何使用該配置的變數值？很簡單，使用 process.env.[name] 進行訪問就可以了，比如：
// vue.config.js
console.log(process.env.NODE_ENV); // development（在終端輸出）這里輸出‘development’ 其實我們期望輸出的是‘stage’，原因是 vue-cli-service serve 命令默認設定的環境是 development
我們希望輸出為stage 就需要對package.json 中的 serve 腳本的命令進行修改
"scripts": { "serve": "vue-cli-service serve --mode stage", }
--mode stage 其實就是修改了 webpack 4 中的 mode 配置項為 stage，
同時其會讀取對應 .env.stage 檔案下的配置，如果沒找到對應組態檔，其會使用默認環境 development，同樣 vue-cli-service build 會使用默認環境 production，
但這時候如果你創建一個 .env 的檔案，再次配置重復的變數，但是值不同，如：
NODE_ENV=staging
VUE_APP_TITLE=staging mode
VUE_APP_NAME=project
因為 .env 檔案會被所有環境加載，即公共配置，那么最終我們運行 vue-cli-service serve 列印出來的stage，但是如果是 .env.stage.local 檔案中配置成上方這樣，列印出來的是 staging，
所以 .env.[mode].local 會覆寫 .env.[mode] 下的相同配置，同理 .env.local 會覆寫 .env 下的相同配置，
由此可以得出結論，相同配置項的權重：.env.[mode].local > .env.[mode] > .env.local > .env
3.環境變數的默認值和自己添加環境變數
- 在main.js列印console.log(process.env);
- 會得到兩個默認變數分別是 BASE_URL: "" 和 NODE_ENV: "development",
- NODE_ENV:""可以用來區分環境 是開發 還是測驗 還是正式環境
- 如下圖
1 . 如果想要自己定義添加環境變數需要,在根目錄下新建.env檔案
以VUE_APP開頭,例如:VUE_APP_MY_NAME="活在風浪" ,注意需要重新啟動服務!
打包環境
1 執行 npm run build 需要在vue.config.js配置publicPath:'./'保證輸出目錄正確
詳見我的這個博客點擊
2 打包命令運行后NODE_ENV變成了production
由此可以得到NODE_ENV可以得到我們請求的基地址
在src目錄下新建一個config檔案夾里面有一個index.js內容是:
更新中...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/401651.html
標籤：其他