fix 联邦组件样式冲突问题

docs/module-federation-guide.md

@@ -50,7 +50,7 @@ export default defineConfig({
   plugins: [
     vue(),
     federation({
-      name: 'MyPlugin', // 需与插件的ID保持一致
+      name: 'MyPlugin',
       filename: 'remoteEntry.js',
       exposes: {
         './Page': './src/components/Page.vue',
@@ -60,13 +60,18 @@ export default defineConfig({
       shared: {
         vue: {
           requiredVersion: false,
+          generate: false,
         },
         vuetify: {
           requiredVersion: false,
+          generate: false,
+          singleton: true,
         },
         'vuetify/styles': {
           requiredVersion: false,
-        }
+          generate: false,
+          singleton: true,
+        },
       },
       format: 'esm'
     })
@@ -74,14 +79,56 @@ export default defineConfig({
   build: {
     target: 'esnext',   // 必须设置为esnext以支持顶层await
     minify: false,      // 开发阶段建议关闭混淆
-    cssCodeSplit: false,
+    cssCodeSplit: true, // 改为true以便能分离样式文件
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vuetify-lib': ['vuetify']  // 将vuetify单独分离出来
+        }
+      }
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '/* 覆盖vuetify样式 */',
+      }
+    },
+    postcss: {
+      plugins: [
+        {
+          postcssPlugin: 'internal:charset-removal',
+          AtRule: {
+            charset: (atRule) => {
+              if (atRule.name === 'charset') {
+                atRule.remove();
+              }
+            }
+          }
+        },
+        {
+          postcssPlugin: 'vuetify-filter',
+          Root(root) {
+            // 过滤掉所有vuetify相关的CSS
+            root.walkRules(rule => {
+              if (rule.selector && (
+                  rule.selector.includes('.v-') || 
+                  rule.selector.includes('.mdi-'))) {
+                rule.remove();
+              }
+            });
+          }
+        }
+      ]
+    }
   },
   server: {
     port: 5001,   // 使用不同于主应用的端口
     cors: true,   // 启用CORS
     origin: 'http://localhost:5001'
   },
-})
+}) 
+
 ```
 
 ## 5. 组件开发规范

examples/plugin-component/vite.config.js

@@ -21,10 +21,12 @@ export default defineConfig({
         vuetify: {
           requiredVersion: false,
           generate: false,
+          singleton: true,
         },
         'vuetify/styles': {
           requiredVersion: false,
           generate: false,
+          singleton: true,
         },
       },
       format: 'esm'
@@ -33,7 +35,48 @@ export default defineConfig({
   build: {
     target: 'esnext',   // 必须设置为esnext以支持顶层await
     minify: false,      // 开发阶段建议关闭混淆
-    cssCodeSplit: false,
+    cssCodeSplit: true, // 改为true以便能分离样式文件
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vuetify-lib': ['vuetify']  // 将vuetify单独分离出来
+        }
+      }
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '/* 覆盖vuetify样式 */',
+      }
+    },
+    postcss: {
+      plugins: [
+        {
+          postcssPlugin: 'internal:charset-removal',
+          AtRule: {
+            charset: (atRule) => {
+              if (atRule.name === 'charset') {
+                atRule.remove();
+              }
+            }
+          }
+        },
+        {
+          postcssPlugin: 'vuetify-filter',
+          Root(root) {
+            // 过滤掉所有vuetify相关的CSS
+            root.walkRules(rule => {
+              if (rule.selector && (
+                  rule.selector.includes('.v-') || 
+                  rule.selector.includes('.mdi-'))) {
+                rule.remove();
+              }
+            });
+          }
+        }
+      ]
+    }
   },
   server: {
     port: 5001,   // 使用不同于主应用的端口