解决qiankun微前端Vue2+Element-ui主应用跳转到Vue3+Element-plus子应用样式冲突问题

一、前言

随着Vue3技术栈逐渐成熟，近期子应用新项目开始使用Vue3+vite+Element-plus技术栈，但之前子应用及主应用都是用Vue2+Element-ui+webpack技术栈，那么从主应用入口跳转到Vue3子应用存在样式冲突（主要是element-ui与element-plus这两套UI存在相同的类）。

二、解决Vue2主应用与Vue3子应用样式冲突方法（推荐使用第二种）

第一种、主应用上修改

在开启qiankun，即start()时，开启sandbox；按官网设置experimentalStyleIsolation: true,并没有达到预期效果，而设置strictStyleIsolation: true，有效果但整个样式都变化了，需要改动较大。

 // 启动 qiankun
  start({
     prefetch: false, // 取消预加载
     sandbox: {
     // strictStyleIsolation: true, // 若需 Shadow DOM 隔离可设为 true
      experimentalStyleIsolation: true // 推荐开启，兼容性好
     }
   })

第二种、Vue3子应用修改------修改 Element Plus 命名空间ep（推荐）

完成以下步骤后，子应用 Element Plus 的类名会从 el-button 变为 ep-button，从而避免与主应用冲突。

1、修改根组件

在子应用的 App.vue 中，使用 ElConfigProvider 组件设置新的命名空间，例如 ep

<!-- 子应用 App.vue -->
<template>
  <el-config-provider namespace="ep">
    <router-view />
  </el-config-provider>
</template>

在子应用的 main.ts 中，注册Element-plus 组件设置namespace(新的命名空间)，例如 ep

const instance = createApp(App);
 // 注册ElementPlus
  instance.use(ElementPlus, {
    locale, // 语言设置
    namespace: "ep"
  });

2、配置 SCSS 变量

在子应用项目中，创建一个 SCSS 文件（如 src/styles/element/index.scss），用于定义新的命名空间。

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

3、配置构建工具，将上述 SCSS 文件全局引入。

1、Webpack：在 vue.config.js 中，配置 sass-loader

// 子应用 vue.config.js
css: {
   loaderOptions: {
     scss: {
       additionalData: `@use "@/styles/element/index.scss" as *;`
     }
   }
 }

2、Vite：在 vite.config.js 中，配置 sass-loader

css: {
   preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`
      }
    }
  },

4、修改入口文件（子应用 main.js 中需要引入 Element Plus 的 SCSS 源文件）,而不是编译后的 CSS，这样命名空间配置才会生效。（关键点）

// main.ts
import ElementPlus from "element-plus";
// 注释掉这行
// import "element-plus/dist/index.css";
// 改为引入 SCSS 源文件
import "element-plus/theme-chalk/src/index.scss";
// element dark scss
// 注释掉这行
// import "element-plus/theme-chalk/dark/css-vars.css";
// 改为引入 SCSS 源文件
import "element-plus/theme-chalk/src/dark/css-vars.scss";

相关文章

基于ElementUi再次封装基础组件文档

---

vue3+ts基于Element-plus再次封装基础组件文档