環境變數的作用:
開發和測試時呼叫後台介面的位址是和生產環境中不一樣的,有些時候需要跳轉到其他網頁,也需要測試和生產環境跳轉不同的頁面。這些配置如果都用人工來維護,上測試環境注釋掉生產的**,上生產環境注釋掉測試的**,會很麻煩也很容易出錯。這些配置如果都用人工來維護,上測試環境注釋掉生產的**,上生產環境注釋掉測試的**,會很麻煩也很容易出錯。所以有必要在乙個入口進行控制,這就要用到vue框架中的環境變數和模式。
參考官方: vue模式和環境變數開發模式
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 忽略
乙個環境檔案只包含環境變數的「鍵=值」對:
在檔案.env中設定環境變數
npm run serve 控制台輸出環境變數
run serve 控制台輸出環境變數
tip:環境變數是node.js編譯,不支援熱修改。若修改環境變數需要重啟服務。 Vue 環境變數
env 在所有的環境中被載入 env.local 在所有的環境中被載入,但會被 git 忽略 env.mode 只在指定的模式中被載入 env.mode local 只在指定的模式中被載入,但會被 git 忽略 乙個環境檔案只包含環境變數的 鍵 值 對 如果是使用生產環境的話 要進行打包 然後在打包...
vue環境變數
1,關於檔名 必須以如下方式命名,不要亂起名,也無需專門手動控制載入哪個檔案 env 全域性預設配置檔案,不論什麼環境都會載入合併 env.development 開發環境下的配置檔案 env.production 生產環境下的配置檔案 2,關於內容 3,關於檔案的載入 根據啟動命令vue會自動載入...
環境變數 Vue 環境變數的使用
文章背景 開發過程中經常遇到這樣的問題 相同的 部署到不同環境時需要使用不同的變數 比如介面網域名稱變數 serve 在測試環境和生產環境使用的是不同的網域名稱。這種情況下如果在 裡定義變數,打包部署前再修改 切換成不同的值再打包不利於 的維護,也很繁瑣。這時候利用環境變數來實現,在不用每次打包前改...