web iframe结构实现

urbanLifelineWeb/packages/workcase/vite.config.ts

@@ -1,13 +1,17 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import { federation } from '@module-federation/vite'
 import { resolve, dirname } from 'path'
 import { fileURLToPath } from 'url'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
+  // 开发和生产环境都通过nginx代理访问/workcase
+  base: '/workcase/',
+  
   plugins: [
     vue({
       script: {
@@ -15,7 +19,23 @@ export default defineConfig({
         propsDestructure: true
       }
     }),
-    vueJsx()
+    vueJsx(),
+    federation({
+      name: 'workcase',
+      remotes: {
+        shared: {
+          type: 'module',
+          name: 'shared',
+          entry: 'http://localhost:5000/remoteEntry.js'
+        }
+      },
+      shared: {
+        vue: {},
+        'vue-router': {},
+        'element-plus': {},
+        axios: {}
+      }
+    })
   ],
   
   define: {
@@ -34,6 +54,7 @@ export default defineConfig({
     port: 5003,
     host: true,
     cors: true,
+    open: '/workcase/',  // 开发时自动打开到 /workcase/ 路径
     proxy: {
       '/api': {
         target: 'http://localhost:8180',
@@ -60,4 +81,4 @@ export default defineConfig({
       }
     }
   }
-})
+}))