Vue環境變數和模式

2021-10-18 03:53:24 字數 1416 閱讀 8338

環境變數的作用:

開發和測試時呼叫後台介面的位址是和生產環境中不一樣的,有些時候需要跳轉到其他網頁,也需要測試和生產環境跳轉不同的頁面。這些配置如果都用人工來維護,上測試環境注釋掉生產的**,上生產環境注釋掉測試的**,會很麻煩也很容易出錯。這些配置如果都用人工來維護,上測試環境注釋掉生產的**,上生產環境注釋掉測試的**,會很麻煩也很容易出錯。所以有必要在乙個入口進行控制,這就要用到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 在測試環境和生產環境使用的是不同的網域名稱。這種情況下如果在 裡定義變數,打包部署前再修改 切換成不同的值再打包不利於 的維護,也很繁瑣。這時候利用環境變數來實現,在不用每次打包前改...