vue環境變數配置

process-env

在使用vue框架時，經常用到的倆種環境，一種是開發環境，一種是生產環境。

• 平時開發使用的是開發環境，如果發佈到線上時，需要切換為線上環境。可以通過不同配置不同的運行命令來自動切換環境。

配置環境實現原理

• 實現原理是採用nodeJS的頂層對象中的process.env（進程環境，返回一個包含用戶環境信息的對象）屬性，根據各個環境的配置文件區分和切換環境

具體實例

• 安裝依賴
  npm install process
• 創建 .env.prod and .env.dev文件 文件創建在根目錄下
• 文件內容

NODE_ENV=production
VUE_APP_API_ENDPOINT=https://api.***.com/v1
VUE_APP_STRIPE_KEY=pk_live_WtwWqDq3IGgks5Ex4Oxe***

設置項目啟動時的預設環境

只要在項目啟動命令後面修改需要的環境即可，

"scripts":{
	"dev":"vue-cli-service serve --mode dev",
	"prod":"vue-cli-service serve --mode prod"
}

*在main.js中列印當前環境，輸出
*console.log（process.env.NODE_ENV)