.env前端環境變量配置

前言

項目有開發環境、測試環境、線上環境，里面的接口域名等是不同的。每次調試或者打包的時候手動改動各個變量，比較麻煩，也容易出錯，所以用自動化方式直接配置的不同的環境變量。

文件配置

在項目根目錄下添加文件，並配置變量

.env.development（本地環境變量）

NODE_ENV = 'development'
VUE_APP_URL = 'http://dev.xxx.com'

.env.production（線上環境變量

NODE_ENV = 'production'
VUE_APP_URL = 'http://prod.xxx.com'

啟動配置

在package.json中配置scripts

本地運行

"serve": "vue-cli-service serve --mode development"

本地運行，使用線上環境變量

"serve:prod": "vue-cli-service serve --mode production"

如果需要傳入環境變量，可以添加cross-env NODE_ENV=development，其中cross-env用於兼容mac

"serve:prod": "cross-env NODE_ENV=development vue-cli-service serve --mode production"

打包

"build": "vue-cli-service build --mode production"

項目中使用

console.log(process.env.VUE_APP_URL)