微前端主子应用之间的样式隔离方案之自定义命名空间

项目背景

当前项目采用的是微前端，子应用部署之后发现样式混乱

• 主应用
  • vue2 + element-ui
• 子应用
  • vue3 + element-plus

解决方案

官网提供了 自定义命名空间，可以解决相同类名下样式冲突问题

项目实践

1. 如官网所说那样需要在根组件上包裹 ElConfigProvider，根通常为主入口 APP.vue 文件

<template>
  <el-config-provider namespace="ep">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld v-bind="bindDate"/>
  </el-config-provider>
</template>

2. 设置 SCSS 和 CSS 变量
   创建 element/index.scss：通常放在 assets 下面，文件夹名字自定义

   @forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
      $namespace: 'ep'
    );
    // 自定义主题色
    // @forward 'element-plus/theme-chalk/src/common/var.scss' with (
    //   $colors: (
    //     'primary': (
    //       'base': green,
    //     ),
    //   ),
    // );
    // 
    // 假如您没有按需引入，要把下面这个全局引入！！！很重要！
    @use "element-plus/theme-chalk/src/index.scss" as *; 
   

3. 修改主入口 main.js 引入 @/assets/element/index.scss

import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import '@/assets/element/index.scss'
 const pinia = createPinia()
 createApp(App).use(pinia).use(ElementPlus).mount('#app')

4. @ 要在vue.config.js 配置别名

   const { defineConfig } = require('@vue/cli-service')
   const path = require('path')
   module.exports = defineConfig({
     configureWebpack: {
       resolve: {
         alias: {
           '@': path.resolve(__dirname, 'src/'),
         },
       }
     }
   })
   

5. 最后大功告成

6. 项目地址： gitee.com/xiaxn/vue3-…