Vue環境變數和模式

環境變數的作用：

開發和測驗時呼叫后臺介面的地址是和生產環境中不一樣的，有些時候需要跳轉到其他網頁，也需要測驗和生產環境跳轉不同的頁面，這些配置如果都用人工來維護，上測驗環境注釋掉生產的代碼，上生產環境注釋掉測驗的代碼，會很麻煩也很容易出錯，這些配置如果都用人工來維護，上測驗環境注釋掉生產的代碼，上生產環境注釋掉測驗的代碼，會很麻煩也很容易出錯，所以有必要在一個入口進行控制，這就要用到vue框架中的環境變數和模式，

參考官方: https://cli.vuejs.org/zh/guide/mode-and-env.html vue模式和環境變數

模式：–mode

開發模式development 用于vue-cli-service serve
測驗模式test 用于vue-cli-service test:unit
生產模式production 用戶vue-cli-service build

環境變數：

在本地啟動專案默認是使用的development模式，使用build命令打包默認是使用的production模式，但是我們一般都會有一個測驗環境，在我們打測驗包和生產包的時候都是用的是production模式，所以需要定義一個環境變數來進行區分，

創建環境檔案

你可以在你的專案根目錄中放置下列檔案來指定環境變數：

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

在這里插入圖片描述

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

請注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開頭的變數將通過 webpack.DefinePlugin 靜態地嵌入到客戶端側的代碼中，

在檔案.env中設定環境變數

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-q4cVodPQ-1611831176017)(C:\Users\陳琳\AppData\Roaming\Typora\typora-user-images\image-20210128092500881.png)]$

在main.js中列印環境變數 process.env.VUE_APP_USERNAME

在這里插入圖片描述

npm run serve 控制臺輸出環境變數

run serve 控制臺輸出環境變數

tip:環境變數是node.js編譯，不支持熱修改，若修改環境變數需要重啟服務，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/253955.html

標籤：區塊鏈

上一篇：Solidty語法總結

下一篇：讀書筆記2區塊鏈與大資料