Open hogalei opened 4 months ago
主应用 vite+vue3 子应用A vite+vue3 子应用B vite+vue3 子应用A想使用模块联邦调用子应用B的组件,并以弹框方式嵌入
子应用A vite.config.js文件
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ArcoResolver } from 'unplugin-vue-components/resolvers' import federation from '@originjs/vite-plugin-federation' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), vueJsx(), AutoImport({ resolvers: [ArcoResolver()] }), Components({ resolvers: [ ArcoResolver({ sideEffect: true }) ] }), federation({ remotes: { 'system-app': 'http://localhost:3001/assets/remoteEntry.js' }, shared: ['vue', '@arco-design/web-vue', 'pinia', 'vue-router'] }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, server: { port: 8000, strictPort: true, cors: true } })
子应用B vite.config.js文件
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ArcoResolver } from 'unplugin-vue-components/resolvers' import federation from '@originjs/vite-plugin-federation' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), vueJsx(), AutoImport({ resolvers: [ArcoResolver()] }), Components({ resolvers: [ ArcoResolver({ sideEffect: true }) ] }), federation({ name: 'system-app', filename: 'remoteEntry.js', exposes: { './dialog': './src/views/dialog.tsx' }, shared: ['vue', '@arco-design/web-vue', 'pinia', 'vue-router'] }) ], build: { target: 'esnext' }, resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, server: { port: 8001, strictPort: true, cors: true } })
子应用单独运行时,正常显示
使用wujie运行时,无法显示,同时报错vue资源加载超时504
进一步调试发现 运行子应用A时正常使用,vue请求的资源为子应用A中的vue资源。 而使用wujie框架时,请求的是主应用的vue资源,而不是子应用A中的vue资源。 这会不会是导致无法显示的原因呢,这个会跟wujie框架劫持加载有关系吗?
主应用 vite+vue3 子应用A vite+vue3 子应用B vite+vue3 子应用A想使用模块联邦调用子应用B的组件,并以弹框方式嵌入
子应用A vite.config.js文件
子应用B vite.config.js文件
子应用单独运行时,正常显示![image](https://github.com/Tencent/wujie/assets/48818851/c2cf43af-c451-4c2e-ab94-601bfc04b731)
使用wujie运行时,无法显示,同时报错vue资源加载超时504
![image](https://github.com/Tencent/wujie/assets/48818851/15162b0e-a9db-4a7e-ae53-eddc2e4ebe5e)