H5项目如何自动判断环境变量

开发vue项目的时候我们常常会新建一个config文件来集中管理配置项如果需要部署到不同的环境就需要手动注释不同的环境变量来切换然后每个环境各打包一份不仅十分麻烦还很容易出错。// 打包前手动注释exportdefaultconstconfig{API_KEY:生产环境的KEY,// API_KEY: 开发环境的KEY,}于是我想了一个办法在不同的服务器上放一个env的静态文本文件文件内就是对应的环境的名称当网页加载的时候先去加载这个文件来自动判断环境。具体实现首先需要改造config文件将所有的配置按照环境的key分开exportdefaultconstconfig{dev:{API_KEY:开发环境的KEY,},prod:{API_KEY:生产环境的KEY,}}然后需要改一下项目的main.js文件主要就是在应用挂在前先判断环境这里以vue2项目为例其他的spa项目也有类似的写法importconfigfrom/lib/config.js;importAppfrom./App;asyncfunctionmain(){// 将env文件放到服务器上之后请求它就可以获取到当前环境这里我是将env文件放到了和index.html同级目录下letenvUrl${location.origin}/env;letenvawaitfetch(envUrl).then((res)res.text());// 这里保存我们当前的环境变量location.setStorage(config,config[env]);constappnewVue({...App,});app.$mount();}main();之后就直接将打包产物放到服务器上面就ok了会自动判断环境不需要每个环境重新打包