基于 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、externals
• public/index.html 引入cdn vue
• package.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