Tencent / wujie

极致的微前端框架
https://wujie-micro.github.io/doc/
Other
3.9k stars 555 forks source link

使用vite-plugin-federation实现模块联邦,子应用单独运行时能正常显示,但在wujie中shared的资源报错504 #796

Open hogalei opened 4 months ago

hogalei commented 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
  }
})

子应用单独运行时,正常显示 image

使用wujie运行时,无法显示,同时报错vue资源加载超时504 image image image

hogalei commented 4 months ago

进一步调试发现 运行子应用A时正常使用,vue请求的资源为子应用A中的vue资源。 而使用wujie框架时,请求的是主应用的vue资源,而不是子应用A中的vue资源。 这会不会是导致无法显示的原因呢,这个会跟wujie框架劫持加载有关系吗?