更新组件声明,移除 LocaleSwitcher 和 ThemeSwitcher,更新 README 文档以增强模块联邦功能的描述,并调整 Vite 配置以支持 ESNext 目标。

This commit is contained in:
jxxghp
2025-05-05 21:41:03 +08:00
parent 047e827884
commit b5761bd18d
11 changed files with 529 additions and 14 deletions

View File

@@ -0,0 +1,141 @@
# MoviePilot 插件远程组件示例
这是 MoviePilot 插件远程组件的示例项目,展示了如何正确配置和开发与主应用兼容的远程组件。
## 开发环境准备
1. 安装依赖:
```bash
npm install
# 或
yarn
```
2. 开发模式运行:
```bash
npm run dev
# 或
yarn dev
```
## 配置说明
### vite.config.js
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'
export default defineConfig({
plugins: [
vue(),
federation({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./PluginComponent': './src/App.vue', // 暴露组件
},
shared: {
vue: {
singleton: true,
requiredVersion: false
}
}
})
],
build: {
target: 'esnext', // 支持顶层await
minify: false,
cssCodeSplit: false,
rollupOptions: {
output: {
minifyInternalExports: false
}
}
}
})
```
### 组件开发
主组件 (src/App.vue) 需要遵循以下规则:
- 使用 Vue 3 组合式 API
- 注册 `action` 事件用于与主应用通信
- 避免直接使用 Vue Router 等全局依赖
示例组件结构:
```vue
<template>
<div class="plugin-component">
<h2>{{ title }}</h2>
<div v-if="loading">加载中...</div>
<div v-else>
<!-- 组件内容 -->
<pre>{{ data }}</pre>
<button @click="refreshData">刷新</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 组件状态
const title = ref('插件示例')
const loading = ref(true)
const data = ref(null)
// 向主应用发送事件
const emit = defineEmits(['action'])
// 刷新数据
async function refreshData() {
loading.value = true
// API 调用...
loading.value = false
// 通知主应用
emit('action')
}
// 初始化
onMounted(() => {
refreshData()
})
</script>
```
## 构建生产版本
```bash
npm run build
# 或
yarn build
```
构建后的 `dist/remoteEntry.js` 是远程组件的入口文件,需要配置到后端让 MoviePilot 能够访问。
## 排查常见问题
### 顶层 await 报错
确保在 `vite.config.js` 中设置 `build.target``'esnext'`
### 共享依赖加载失败
确保正确配置共享依赖:
```js
shared: {
vue: {
singleton: true,
requiredVersion: false // 关闭版本检查
}
}
```
### 组件无法加载
1. 检查网络请求是否成功
2. 确认 JS 文件可以被正确访问
3. 查看浏览器控制台是否有详细错误信息