桂林人论坛风姿摄影seo运营经理
背景：qiankun微前端架构实现多应用集成
主应用框架：vue2&element-ui
子应用框架：vue3&element-plus
>> 问题现象和分析
登录页面是主应用的，在登录之后才能打开子应用的菜单页面，即加载子应用。
首次进入登录页面样式是没有问题的，但是打开过子应用页面之后，再回到主应用的登录页面时，登录页面的下拉框和输入框的边框不见了。
1、F12观察 <el-input> 的结构和样式， element-ui 给 .el-input_inner设置了 border，但是 element-plus 去掉了 border
2、再观察一下 element-plus 的 <el-input>，比 element-ui 多了一层 el-input__wrapper，element-plus 是给 el-input__wrapper设置了 box-shadow来作为边框的
>> 解决方法
element-plus 提供了：自定义命名空间，参考官网将使用 element-plus 的应用使用自定义命名空间，与 element-ui 固定的 el-前缀区分开。
代码参考
App.vue
<template><el-config-provider namespace="ep"><!-- ... --></el-config-provider>
</template>
/src/styles/element_plus_index.scss
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'
);
vite.config.js（使用vite搭建项目）
import { defineConfig } from 'vite'
export default defineConfig({// ...css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/element_plus_index.scss" as *;`,/* additionalData: `@use "@/styles/element_plus_index.scss" as *;@use "@/styles/xxx.scss" as *;@use "@/styles/yyy.scss" as *;` */ // 如果有多个文件需要引入},},},// ...
})
vue.config.js（使用 vue-cli搭建项目）
module.exports = {css: {loaderOptions: {sass: {additionalData: `@use "@/styles/element_plus_index.scss" as *;`},},}
}
最后，把开发过程中自定义的一些 element组件样式中的 el-前缀都替换成ep-
>> 效果
如下图为子应用页面，可见子应用 element-plus 的 标签类名和样式文件都改为 ep-前缀，不会再影响主应用
>> 框架版本记录
（有些应用使用了较早版本的 element-plus，而较早版本的 element-plus功能当时还不是很稳定，自定义命名空间可能无法使用，记录一下我当前正在使用的框架版本）
- 应用框架版本1
# vue-cli 5.0.8"vue": "^3.0.0""element-plus": "2.3.8"
- 应用框架版本2
# vite 5.3.1"vue": "^3.4.29""element-plus": "^2.8.0"