基于 vue-admin-template 改造为远程模块,详细改造说明见 HEL_DESC.md
npm i hel-lib-proxy hel-dev-utils [email protected] rollup@2 rollup-plugin-typescript rollup-plugin-terser shx
将原来的 src/main.js
内容复制到 src/loadApp.js
里
新增 src/entrance
目录作为统一暴露模块的出口目录
新增 src/configs/subApp.js
文件描述模块名
引入 hel-lib-proxy
包,做分流控制
根目录引入 subApp.js
文件,对接 hel-dev-utils
,供构建工具的vue.config.js
文件使用,主要改动有
vue.config.js
里修改 publicPath、distDir、output.jsonpFunction、externalspublic/index.html
引入cdn vuepackage.json
启动命令里声明 PORT,对齐 publicPath 里的端口号- 复制 https://github.com/hel-eco/hel-tpl-remote-vue-comp/tree/master/scripts 三个文件到
scripts
目录下 package.json
新增命令build
用于构建hel包,可参考 https://github.com/hel-eco/hel-tpl-remote-vue-comp/blob/master/package.json 直接复制package.json
新增files
表示npm发布要提交的文件范围
npm run build npm publish
入口文件先绑定vue运行时
import { bindVueRuntime } from 'hel-micro';
import Vue from 'vue';
bindVueRuntime({Vue});
export default {
components: {
Hamburger: defineAsyncComponent(async () => {
const comps = await preFetchLib("lib-zhangbb-component");
return comps.Hamburger;
}),
},
};
原入口文件下沉,然后加载远程模块,参考 https://github.com/hel-eco/hel-demo-use-remote-vue3-comp/blob/main/src/main.ts
await preFetchLib('lib-zhangbb-component')
然后安装lib-zhangbb-component
, 其他地方可import 静态导入模块
import { Hamburger } from 'lib-zhangbb-component';
hel-dev-utils hel-lib-proxy hel-iso