VUE 3多環境配置（很是規的騷操做）

常規操做

這是一個經過修改vue.config.js來替代新建env文件配置環境變量的方法，這樣能減小配置文件數量，減小根目錄文件數量，讓配置更易閱讀和修改，讓目錄和代碼更清爽。（這都是主觀感覺，歡迎小夥伴輕拍）

修改package.json

經過vue-cli-service --mode local來指定是哪一個運行環境

"scripts": {
  "serve-local": "vue-cli-service serve --port 8806 --mode local",
 "serve-dev": "vue-cli-service serve --port 8806 --mode development",
 "serve-prod": "vue-cli-service serve --port 8806 --mode production",
 "build": "vue-cli-service build --mode production",
 "lint": "vue-cli-service lint"
},

添加.env文件

爲每一個mode新建一個.env.[mode]的文件，值env文件裏面指定變量,

VUE_APP_SERVER_URL = "localUrl"
....

項目中運用

好比在config.js中導入環境變量

export const SERVICE_URL = process.env.VUE_APP_SERVICE_URL;

問題

1. 每一個mode都對應一個env文件，local，dev，prod三種模式就是3個文件，若是再還有別的測試服務器還的再加文件
2. env默認在根目錄，若是能專門建個env文件夾感受會更好。
3. env文件都是文本顯示，不易閱讀和修改

騷操做解決方法

修改package.json

和常規操做同樣

修改vue.config.js

經過process.VUE_CLI_SERVICE.mode來獲取--mode的傳值，根據mode值來經過js的方法來設置環境變量。若是配置環境變量只寫到vue.config.js文件下不優雅，小夥伴能夠自行經過js的方式來組織環境變量的文件，歡迎小夥伴觸類旁通

const mode = process.VUE_CLI_SERVICE.mode
console.log("mode=", mode);
if(mode == "local"){
    process.env.VUE_APP_SERVICE_URL = "localUrl"
    process.env.VUE_APP_PLATFORM = "/same"
}else if(mode == "development"){
    process.env.VUE_APP_SERVICE_URL = "devUrl"
    process.env.VUE_APP_PLATFORM = "/same"
}else if(mode == "production"){
    process.env.VUE_APP_SERVICE_URL = "prodUrl"
    process.env.VUE_APP_PLATFORM = "/same"
}
module.exports = {
    publicPath : './'
};

不知道這樣配置環境變量是否是溫馨一些？歡迎小夥伴留下寶貴的意見和建議！

項目中運用

和常規用法同樣

若是您感到有幫助請發請點贊