vue 項目中的環境變量配置

項目的開發和生產的一些變量可能會不一樣，比如：ip地址、端口號、某些規則編號等，發布生產環境時，需要手動把開發環境的ip地址換成生產環境的，本地開發維護時，還要再換回來，比較麻煩；所以動態配置這些變量，會方便一點，利用全局環境變量屬性process.env。

方法一：在配置文件里設置

1.配置文件

​ 文件1: .env 全局默認配置文件

VUE_APP_BASE_URL="http:178xxxxx";
VUE_APP_GORA_URL="http:178xxxxx";

​ 文件2： .env.development 開發環境下的配置文件

//開發環境下的地址
VUE_APP_BASE_URL="http:192xxxxx";
VUE_APP_GORA_URL="http:192xxxxx";

​ 文件3： .env.production 生產環境下的配置文件

//生產環境下的配置
VUE_APP_BASE_URL="http:178xxxxx";
VUE_APP_GORA_URL="http:178xxxxx";

2.命名規則

命名必須以VUE_APP_開頭！！！

3.加載順序

// npm run serve ：先加載.env  再加載.env.development
// npm run build ：先加載.env  再加載.env.production
// 后加載的會覆蓋先加載的文件
// (啟動服務和打包的命令，不同項目命令根據配置可能不一樣)

4.vue 中使用

let baseUrl = process.env.VUE_APP_BASE_URL   //全局的process

方法二：js 或vue文件中配置，在哪用在哪配

let baseUrl = ""
if (process.env.NODE_ENV == 'development') {
    console.log("開發版本")
	baseUrl = "http:xxxxx"
} else if (process.env.NODE_ENV == 'production') {
    console.log("上線版本");
	baseUrl = "http:xxxxxx"
}