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 : './'
};

不知道这样配置环境变量是否是温馨一些？欢迎小伙伴留下宝贵的意见和建议！

项目中运用

和常规用法同样

若是您感到有帮助请发请点赞