乾坤qiankun（微前端）样式隔离解决方案–使用插件替换前缀

飞熊 • 2023年12月19日下午8:52 • Vue • 阅读 230

一、前言

qiankun作为微前端的一种融合方式，目前也比较成熟，但是由于各类开发技术选型非常繁多，导致了在项目中配置不同，解决别人的问题，不一定能解决自己的问题。

使用的js框架的不同或版本的不同：vue/react 等，vue2/vue3 等
ui组件库版本的不同，以element为例，可分为element-ui/element-plus
打包工具的不同，比如常用的webpack/vite等
各类插件版本的不同，比如，node的版本，webpack的版本，vite的版本，node-sass/sass-loader的版本等

二、样式隔离

single-spa 没有做这部分的工作。一个大型的系统会有很的微应用组成，怎么保证这些微应用之间的样式互不影响？微应用和主应用之间的样式互不影响？这时只能通过约定命名规范来实现，比如应用样式以自己的应用名称开头，以应用名构造一个独立的命名空间，这个方式新系统还好说，如果是一个已有的系统，这个改造工作量可不小。

本文以主应用UI框架与子应用UI框架分别使用element-ui和element-plus来做示例。

因为element-ui和element-plus前缀相同、命名规则相同，但内部html结构发生变化，从而导致子应用element-plus的样式会被污染。

三、解决方案

以下设置需要注意不能开启sandbox:{strictStyleIsolation:
true}，并且注意自定义样式最好规范加上自定义规范，尽量不与基座应用同名。

1、使用change-prefix-loader替换js中的class前缀

安装依赖change-prefix-loader

npm i change-prefix-loader -D

配置规则

<!-- vue.config.js -->

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('change-prefix')
            .test(/\.js$/)
            .include.add(path.resolve(__dirname, './node_modules/element-ui/lib'))
            .end()
            .use('change-prefix')
            .loader('change-prefix-loader')
            .options({
                prefix: 'el-',
                replace: 'gp-'
            })
            .end()
    },
}

2、使用postcss-change-css-prefix替换css样式前缀

安装依赖

npm i postcss-change-css-prefix -D

配置规则，在根目录创建postcss.config.js

<!-- postcss.config.js -->
const addCssPrefix = require('postcss-change-css-prefix')

module.exports = {
  plugins: [
    addCssPrefix({
      prefix: 'el-',
      replace: 'gp-',
    }),
  ],
}