背景：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"
