南宁网站建设智能优化免费发布产品信息的网站

背景：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. 应用框架版本1

	# vue-cli  5.0.8"vue": "^3.0.0""element-plus": "2.3.8"

2. 应用框架版本2

	# vite  5.3.1"vue": "^3.4.29""element-plus": "^2.8.0"