Vue 不重新打包，动态加载全局配置的实现过程

背景

项目前端采用了 Vue.js ，跟传统前端 html 技术不同之处在于，每次打包后都重新生成新的 js 文件，而且不可读，必须全量替换。但最近碰到一个漏洞扫描的问题，系统通过单点登录方式访问时，是不能有登录首页的。

解决办法是：从全局前端配置文件中，动态加载系统配置项，由它来控制前端路由参数，比如开发环境，配置系统的首页路由为 a，生产环境配置首页路由为 b，怎么实现呢？

JSON 方式

最初尝试的方式是，将配置文件放在 index.html 同级别目录下，存储为 JSON 格式，然后直接 import 该文件。结果修改配置文件后，页面加载到的 JSON 对象仍然是旧的配置文件。

全局查找发现，Vue 打包的时候，直接读取了该 JSON 文件，然后解析用JSON.parse 解析文件内容，相当于硬编码了，所以无法动态变更。

那个 import 语句的本质是：

这种方式没法动态加载前端配置文件。

全局 JS 变量

另外一种方式是，在 index.html 同级别目录下定义一个 js 文件，文件里面定义一个全局配置对象，然后 index.html 文件中再引入这个 js 文件。具体步骤：

第一步，在 index.html 根目录创建一个 config.js 文件，里面就是传统的 js 文件，定义一个前端需要的全局配置对象，例如：

const frontConfig = {
   
  "comment": "前端全