基座引入子应用加载配置
背景
当前应用为原vue2.0单体通过 qiankun 微应用方式升级为 vue 3.0 + antd + ts，属于纯前端改造，不涉及后端调整。
目的
实际开发中, 子应用加载配置为本地js文件, 我们需要同时调试或测试多个本地以及线上子应用。既多个子应用的联调， 情况一般分为
- 本地应用与本地应用
- 本地应用与线上应用
- 线上应用与线上应用
这里其实就是切换不同子应用的加载地址。 最终的配置文件可能为:
const conf = [
{
// 本地已打包应用
"name": "local_build",
"version": "0.1.0",
"entry": "./local_build.html",
"port": 9010,
"container": "#MICRO-CONTIANER",
"activeRule": "/micro/local_build",
"_other": {}
},
{
// 本地开发应用
"name": "local_dev",
"version": "0.1.0",
"entry": "//localhost:9020",
"port": 9020,
"container": "#MICRO-CONTIANER",
"activeRule": "/micro/local_dev",
"_other": {}
},
{
// 线上应用
"name": "bulletin-board",
"version": "0.1.0",
"entry": "./bulletin-board.html",
"port": 9030,
"container": "#MICRO-CONTIANER_bulletin-board",
"activeRule": "/micro/bulletin-board",
"_other": {}
}
];方式1
直接修改加载地址， 基座加载本地修改的配置文件，不同应用配置不同的代理地址。
- 优点：
- 修改少，实现简单
- 缺点：
- 无法直接加载已打包子应用
- 需要协调各个应用的代理模式
方式2
配置文件作为独立包，通过url 引入，这种方式是通过js 动态添加静态资源文件。 因为可以动态添加，所以即使基座和子应用已经过打包，也可以通过修改配置包。达到修改配置的目的。同时无需对基座做二次打包。
目录
- /project
- /root 基座
- /apps 子应用
- app_1
- .....
- /apps-conf 配置包
- /dist 整体打包后文件, 包括基座和各个子应用
apps-conf 创建配置包
配置包就是简单的将配置文件作为npm包输入。 这里通过rollup 打包为 umd 包。 详细的npm包配置以编写可以参看 参考 。
// 最终生成文件
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global\['@micro/apps-conf'\] = factory());
}(this, (function () { 'use strict';
const conf = [
{
"name": "app",
"version": "0.1.0",
"entry": "./app.html",
"port": 9030,
"container": "#MICRO-CONTIANER",
"activeRule": "/micro/app",
"_other": {}
}
];
return conf;
}))
```pakcage.json 设置不同环境变量，rollup 通过不同环境变量将包文件输出到不同的目录地址。
```javascript
// pakcage.json
"scripts": {
"dev": "set NODE\_ENV=development&rollup -c rollup.config.js -w",
"build": "set NODE\_ENV=production&rollup -c rollup.config.js",
"build:root": "set NODE\_ENV=local&rollup -c rollup.config.js"
}
// rollup
// 本地打包
let outputMap = [
{
file: packageJSON.main,
format: 'umd',
},
{
file: packageJSON.module,
format: 'es',
}
]
// 输出到基座目录
if(ENV === 'local'){
const output = path.resolve(\`../..${GLOBAL\_CONF.root}${GLOBAL\_CONF.appsConfoutput}`, './')
outputMap = [
{
file: output,
format: 'umd',
}
]
}
// 输出到整体打包目录
if(ENV === 'production'){
const output = path.resolve(\`../..${GLOBAL\_CONF.output}${GLOBAL\_CONF.appsConfOutPut}`, './')
outputMap = [
{
file: output,
format: 'umd',
}这里输出不同的路径，主要为了基座在不同的环境下内正确加载。需要更具实际的目录结果做配置。
root 基座修改
目录
/root
- public
- apps-conf // 输出到基座的配置包
- index.js
- index.html // 模板文件修改 index.html
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./favicon.ico">
<title>管理平台</title>
<!-- 子应用加载配置 -->
<script>document.write('<script src="./apps-conf/index.js?t=' + new Date().getTime() + '"><\\/script>');</script>
</head>
<body>
<div id="app"></div>
</body>
</html>这里添加 t 查询参数防止浏览器缓存, 引入地址既为 模板与配置包的相对地址。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录