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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

背景

项目前端采用了 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": "前端全局配置","title": "xxx 应用","environment": "dev"
};

第二步index.html 文件的 header 标签中引入该 js

<script src="<%= BASE_URL %>config.js"></script>

第三步Vue 项目中的任何地方都可以引用 frontConfig 对象了。

其原理很简单因为 index.html 是 Vue 的渲染基础文件它包含了一个全局 JS 文件并且执行了里面的代码后整个前端就定义了这样一个全局变量了。不需要加载任何地方都可以直接使用这个变量了。

又因为它是跟 index.html 同级别的静态资源文件所以不受 Vue 打包影响修改后刷新页面可以立即生效。

其他尝试方式

本来想这个全局配置放在后端控制但是有一个问题路由文件定义代码中ajax 请求是异步的根据请求结果动态控制不了路由数据的定义。

一般的路由文件定义代码如下

引入前面的全局 JS 后调整路由定义根据环境变量配置不同的路由地址

const env = frontConfig.environment;
if (env === 'dev') { // 开发环境加载系统首页为 A routes.push({path: '/',name: 'a',component: () => import('A.vue'),meta: { title: 'a', icon: 'a' },});
} else { // 加载系统首页为 B routes.push({path: '/',name: 'b',component: () => import('B.vue'),meta: { title: 'b', icon: 'b' },});
}