qiankun主应用（vue2+element-ui）子应用（vue3+element-plus）不同版本element框架css样式相互影响的问题

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