微前端下element-ui弹框偏移问题解决

本章主要是解决无界微前端环境下element-ui弹框偏移问题，如果你用的是其他微前端框架，且提供了jsloader这种预处理器，则可以举一反三解决同样的问题。

如果不想看我废话，请直接移步到5看代码和后面的效果图。

1. 首先，我使用的是无界官方源码，下载地址：无界微前端源码
   如图已经下载到本地了：使用pnpm i安装一下依赖
   
   如果报错，请更新你的nvm或者使用16.19.0版本的node
2. 启动官网例子：npm run start，正确启动的话可以看到一下页面：
   
   点击进入vue2的dialog页面。

3. 我们打开examples\vue2\src\main.js，在顶部任意地方加入：

   import Row from "element-ui/lib/row";
   import Col from "element-ui/lib/col";
   import "element-ui/lib/theme-chalk/row.css";
   import "element-ui/lib/theme-chalk/col.css";
   [Row, Col].forEach((element) => Vue.use(element));

   如图：
   

4. 打开examples\vue2\src\views\Dialog.vue，写入代码：

以上代码就是为了写一个弹框，且弹框内有左中右三个下拉框，来显示下拉框是否位置正常。
5. 【全文重点】 打开examples\main-vue\src\views\Vue2-sub.vue此文件，写入：

按以上操作则可以实现官网例子内的弹框不在偏移。且不论下拉框是何种定位都能实现完美位置。

综上所述：

你只需更改主应用的plugins即可修复弹框偏移问题；按照5所述，修改即可。（费了大量的时间和精力，一直在寻找一个完美且傻瓜式的解决办法，最终还是调试源码，找到此办法。github上解决此问题的人都是各种奇淫技巧，但我们只需要最朴素且简单见效的办法。）

最终实现效果展示：

(弱弱的问一句)：如果解决了你的问题，可否到（小程序/app）拼夕夕上搜 店铺 “琼肴食货”, 进店来一单。。。

小贵，好吃！解决问题不易，施舍也是美德！