1、背景
常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的。如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效。那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢?
2、可选方案
进行了调研后,网上介绍的方案有2种:
1)在static上设置一个config.js,把配置的参数设置成 window 下的全局变量。这种方案的确可行,但是,但是,不安全!!! 如果请求地址被恶意修改,后果不太好~
2)使用 generate-asset-webpack-plugin 插件,配置一大坨后生成一个静态文件,然后通过请求的方式,获取需要的数据,这种方法可以解决安全性问题,但是,但是,有点小麻烦啊~
因此,博主根据实际项目,将两种方法结合在一起,形成了一个中和的方案。
3、执行方案
配置步骤
第一步:在 static 文件夹中新建一个 config.json,把你要写的配置写入
{// 基本访问地址"BASE_URL":"http://webhmy.com"}
放在static下的文件,可以被直接访问。
第二步:在 main.js 中请求定义的配置文件,并放到 Vue.prototype 中,使全局可访问&#