@melt-js/comps-vue3-ele

Vue 3 + Vite 5 的 hel 远程组件提供方（由 hel-mirco-vite5-vue3-monorepo 的 packages/remote 拆出，与 comps-vue3-antd 同源，UI 框架换成 Element Plus）。

| 项 | 值 | | --- | --- | | npm 包名 | @melt-js/comps-vue3-ele | | hel 组名（appGroupName / LIB_NAME） | comps-vue3-ele | | 本地联调地址 | http://localhost:20050 | | UI 框架 | element-plus 2 |

目录说明

src/
  main.ts                    入口：libReady 暴露组件；独立访问时挂载调试页
  loadApp.ts                 独立开发页的挂载逻辑
  components/
    index.ts                 对外暴露的组件集合（App、HelloWorld）
    App.vue                  远程组件的「应用级」聚合组件
    HelloWorld.vue           演示组件（内置 element-plus 的 ElButton）
  configs/subApp.ts          hel 组名，需与 package.json appGroupName 一致
  entrance/
    libProperties.ts         暴露给使用方的组件对象
    libTypes.ts              类型入口 + rollup 打包入口（产出 hel_proxy 空壳代理）
vite.config.ts               dev/preview 用本地绝对地址，build 用 appInfo 推导（unpkg）
appInfo.mjs                  hel-dev-utils 生成的子应用元信息（dev / build 自动切换 homePage）
rollup.config.js             产出 hel_proxy / hel_proxy_es
scripts/                     check_name（组名校验）、meta（生成 hel-meta.json）、prepublishOnly（发布前校验）

Element Plus 的样式在 src/main.ts 里通过 import 'element-plus/dist/index.css' 全量引入， 会随 hel_dist 一起被宿主页面加载；组件按需从 element-plus 引入（如 ElButton）。

本地开发 / 构建

pnpm comps3-ele:dev         # 或在本目录 pnpm dev，起 20050 端口
pnpm comps3-ele:build       # 发布用产物：资源地址指向 unpkg
pnpm comps3-ele:build:local # 本地联调用产物：资源地址指向 http://localhost:20050
pnpm comps3-ele:preview     # 预览 hel_dist 里的构建产物（仍是 20050）

• 端口固定 20050 且开了 strictPort：因为产物里的资源地址是绝对值，端口漂移会导致宿主加载不到。
• 资源地址与 comps-vue2-ele 一致，由 appInfo.mjs 交给 hel-dev-utils 按环境推导，不在代码里写死：
  • 本地调试（vite dev，NODE_ENV=development）：取 homePageDev → http://localhost:20050/
  • 打包发布（vite build，NODE_ENV=production）：按 npmCdnType: 'unpkg' 推导 → https://unpkg.com/@melt-js/comps-vue3-ele@<version>/hel_dist/
  • 需要本地预览「打包产物」时先执行 pnpm comps3-ele:build:local（等价的底层写法是 HEL_APP_HOME_PAGE=http://localhost:20050 pnpm run build），再 pnpm comps3-ele:preview。
• 直接访问 http://localhost:20050 可单独调试组件：index.html 里显式引入了 Vue 3 CDN（与 comps-vue2-ele 的 public/index.html 一致），并带 data-helappend="0"，dev / preview / 发布后的独立页面都复用它；宿主通过 hel 解析该 html 时会跳过它，使用宿主 bindVueRuntime 注入的那一份 vue，不会加载第二份 vue。
• src/loadApp.ts 内部再判断一次 isMasterApp()：umd 构建（inlineDynamicImports）会把该模块内联进入口包，模块体在包加载时就会执行，所以挂载判断必须放在模块内，否则宿主页面会被远程组件接管 #app。
• 仓库内暂无 ele 专用的宿主 demo；接入方式与 demo-vue3-antd 完全相同——宿主通过 preFetchLib 加载本模块，Vue 由宿主的 bindVueRuntime 提供，不要再额外引入一份 vue，否则响应式会失效。

产物与发布

pnpm build 产出：

• hel_dist/：vite build 的 umd 产物 + hel-meta.json + hel_proxy/entry.js
• hel_proxy/、hel_proxy_es/：消费方 npm i @melt-js/comps-vue3-ele 后 import 到的空壳代理

pnpm build 的 index.html、hel-meta.json（webDirPath / htmlIndexSrc / 资源清单）里的地址都是 https://unpkg.com/@melt-js/comps-vue3-ele@<version>/hel_dist/...，发布到 npm 后即可直接被 unpkg 加载； pnpm build:local 则全部指向 http://localhost:20050/，仅用于本地联调。

发布相关脚本（与 comps-vue2-ele 对齐）：

• prepublishOnly：发布前校验 package.json 版本号与 hel_dist/hel-meta.json 的 build_version 一致， 且产物已构建；同时拒绝 hel-meta.json 里记录的是 localhost / 127.0.0.1 的本地构建产物 （需要重新执行 pnpm run build）。
• publish:stage：pnpm run build && npx -y npm@11 stage publish，走 npm stage 发布。

与 comps-vue3-antd 的差异

| 项 | comps-vue3-antd | comps-vue3-ele | | --- | --- | --- | | 包名 / 组名 | @melt-js/comps-vue3-antd | @melt-js/comps-vue3-ele | | UI 依赖 | ant-design-vue 4.2.6 | element-plus 2.14.7 | | 全局样式 | ant-design-vue/dist/reset.css | element-plus/dist/index.css | | 演示按钮 | Button | ElButton | | 端口 | 20030 | 20050 |