前端 vue環境變數

2022-09-22 00:06:22 字數 1658 閱讀 7979

使用vue-cli建立乙個空專案

vue create mysite01
啟動專案

cd mysite01


npm run serve


npx vue-cli-service serve
修改main.js列印環境變數

// 列印環境變數

console.log("env:",process.env)

輸出：

object
此時環境變數中有兩個值第乙個是node_env，第二個是base_url。

【注意】首先要明確乙個npx vue-cli-service serve --mode，這裡的其實就是.env檔案後面的，例如npx vue-cli-service serve --mode production其實就是尋找的.env.production這個環境配置檔案

3.1 傳統的環境變數模式

在專案的根目錄下建立環境變數檔案

.env 					# 預設是development


.env.local				# 本地配置並且git不提交


.env.production			# 生產模式
比如我們編輯.env的檔案

# .env
npx vue-cli-service serve
在瀏覽器控制台檢視env：

為了驗證我們.env配置檔案預設是development，我們重新啟動專案並加上環境變數

npx vue-cli-service serve --mode development
在瀏覽器控制台檢視env：

我們重新編寫乙個.env.production的檔案

# .env
我們以prodction模式啟動專案

npx vue-cli-service serve --mode production
在瀏覽器控制台檢視env：

3.2 多生產環境下的環境變數

此部分都是個人的一些觀點

由於生產環境可能又多個服務的情況出現，所以只有乙個production是不夠的。我們就以兩個生產環境來看，在專案根目錄下重新建立這兩個環境檔案

.env.prod01


.env.prod02
分別修改檔案:

.env.prod01

.env.prod02

此時以prod01啟動專案

npx vue-cli-service serve --mode prod01
控制台輸出：

此時以prod02啟動專案

npx vue-cli-service serve --mode prod02
控制台輸出：

總結：

Vue 環境變數

env 在所有的環境中被載入 env.local 在所有的環境中被載入，但會被 git 忽略 env.mode 只在指定的模式中被載入 env.mode local 只在指定的模式中被載入，但會被 git 忽略 乙個環境檔案只包含環境變數的 鍵 值 對 如果是使用生產環境的話 要進行打包 然後在打包...

vue環境變數

1，關於檔名 必須以如下方式命名，不要亂起名，也無需專門手動控制載入哪個檔案 env 全域性預設配置檔案，不論什麼環境都會載入合併 env.development 開發環境下的配置檔案 env.production 生產環境下的配置檔案 2，關於內容 3，關於檔案的載入 根據啟動命令vue會自動載入...

環境變數 Vue 環境變數的使用

文章背景 開發過程中經常遇到這樣的問題 相同的 部署到不同環境時需要使用不同的變數 比如介面網域名稱變數 serve 在測試環境和生產環境使用的是不同的網域名稱。這種情況下如果在 裡定義變數，打包部署前再修改 切換成不同的值再打包不利於 的維護，也很繁瑣。這時候利用環境變數來實現，在不用每次打包前改...