一、背景与架构

也是一种微前端架构，但是不同于 qiankun 这样的重型微前端框架。

业务场景

我参与过一个桌面端内容展示项目，技术栈是 Electron + Vue3。项目中有个主要需求：主入口由多个独立开发的卡片组件构成。这些组件需要能够独立更新，而不需要重新打包整个桌面应用。

简单说就是这方面。组件要能热更新，随时替换，不影响主程序。

基于这个需求，设计了一套四层架构：

┌─────────────────────────────────────────────────────────────┐
│ Layer : Electron桌面应用 │
│ 职责：展示内容，提供运行容器。渲染卡片 │
├─────────────────────────────────────────────────────────────┤
│ Layer : 内容编排程序 │
│ 职责：上传组件、编排布局、配置跳转、发布配置 │
├─────────────────────────────────────────────────────────────┤
│ Layer : 组件开发项目 │
│ 职责：开发卡片组件 → 打包UMD → 生成ZIP → 上传组件仓库 │
├─────────────────────────────────────────────────────────────┤
│ Layer : 详情落地页 │
│ 职责：卡片点击后的跳转详情页面 │
└─────────────────────────────────────────────────────────────┘

这个架构的主要是 Layer如何让每个组件独立开发、独立打包、独立部署。

主要问题

我们要解决三个痛点：

1. 如何打包？怎么说呢， 一个项目里有多个组件。每个组件要能单独打包成 JS 文件。
2. 如何加载？ 桌面应用在运行时动态加载这些 JS 文件并渲染。
3. 如何编排？ 后台程序能够灵活配置哪些组件显示在什么位置。怎么说呢，

这篇文章主要讲前两个痛点。

二、组件打包：Vite Lib 模式

设计目标

我们想要这样的效果：在组件开发项目中，输入命令就能打包指定组件。

npm run component abc # 打包 abc 组件
npm run component newsList # 打包 newsList 组件
npm run component chart # 打包 chart 组件

每个组件独立打包，互不干扰。打包产物是一个可直接在浏览器中运行的 UMD 文件。

项目结构

component-project/
├── src/
│ └── components/
│ ├── abc/
│ │ ├── index.js # 组件入口
│ │ ├── abc.vue # 组件代码
│ │ └── config.json # 组件元信息
│ ├── newsList/
│ │ ├── index.js
│ │ ├── newsList.vue
│ │ └── config.json
│ └── chart/
│ ├── index.js
│ ├── chart.vue
│ └── config.json
├── scripts/
│ └── build-component.js # 打包脚本
├── vite.component.config.js # Vite 打包配置
└── package.json

组件如何导出

// src/components/abc/index.js
import abc from './abc.vue'
export default {
// install 方法：支持 app.use 注册所有组件
install {
app.component
},// 单独导出供按需引入使用的原始 Vue 对象
abc,}

至于主要配置。一个配置服务所有组件

// vite.component.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
const componentName = process.env.COMPONENT_NAME // 从环境变量获取名称
const entryFile = process.env.COMPONENT_ENTRY // 从环境变量获取入口
export default defineConfig({
plugins:,build: {
至于lib，{
entry的观点是，entryFile,name: `${componentName}Component`,fileName: => `${componentName}.${format}.js`,},rollupOptions: {
external:,output: {
globals: {
vue的观点是，'Vue',},},},cssCodeSplit: false,// 不拆分 CSS，配合插件实现 CSS 注入 JS 中
},})

打包脚本

// scripts/build-component.js
import { execSync } from 'child_process'
import fs from 'fs'
import path from 'path'
// 获取命令行参数，例如 npm run component abc -> "abc"
const componentName = process.argv
if {
console.error
process.exit
}
// 检查入口文件是否存在如不存在直接报错退出
const entryFile = path.join
if ) {
console.error
process.exit
}
// 设置环境变量供 Vite 使用
process.env.COMPONENT_NAME = componentName
process.env.COMPONENT_ENTRY = entryFile
// 执行 Vite 建立命令。并把子进程的输出直接打印到控制台
execSync('npx vite build --config vite.component.config.js',{
至于stdio，'inherit',env: process.env,})

`package.json` 脚本配置

{
"scripts": {
"component": "node scripts/build-component.js"
}
}

Pain Point Demonstration – 完整流程回顾：

1. `build-component.js` 接收参数 `abc`；

样式处理

AWS 默认会把 CSS 抽离成单独文件，但我们的目标是「一个 JS 包含所有内容」。于是引入 @vite-plugin/css-injected-by-js

npm install --save-dev vite-plugin-css-injected-by-js 

The plugin automatically creates a `