Bootstrap

乾坤(qiankun)框架子系统应用elment-ui框架弹框里的样式消失错乱问题

终极解决方案 哈哈哈 找了很久的文档 终于解决啦 耶!
参考各位大神的解决方法 自己运行后实验了下成功啦

注:写一个webpack loader替换element-ui class前缀,写一个postcss plugin替换样式前缀,可以算得上是终极方案了,具体使用可以看相应文档。

以下是代码步骤:
在乾坤框架的子系统中
1.新建 postcss.config.js 文件
下载 插件 npm install postcss-change-css-prefix change-prefix-loader

const addCssPrefix = require("postcss-change-css-prefix");

module.exports = {
  plugins: [
    addCssPrefix({
      prefix: "el-",
      replace: "gp-",
    }),
  ],
};

2.在vue.config.js 中修改

const { defineConfig } = require("@vue/cli-service");
const path = require("path");

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? "img" : "/",
  devServer: {
    port: 20000,
    open: "http://localhost:20000",
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    proxy: {
      "/api": {
        target: "http://localhost:20000",
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/api": "", // 请求数据路径别名,这里是注意将static/mock放入public文件夹
        },
      },
    },
  },
  chainWebpack: (config) => {
    config.module.rule("fonts").type("asset/inline").set("generator", {});
    config.module.rule("images").type("asset/inline").set("generator", {});
    config.module
      .rule("change-prefix")
      .test(/\.js$/)
      .include.add(path.resolve(__dirname, "./node_modules/element-ui/lib"))
      .end()
      .use("change-prefix")
      .loader("change-prefix-loader")
      .options({
        prefix: "el-",
        replace: "gp-",
      })
      .end();
  },
  configureWebpack: {
    output: {
      path: path.resolve(__dirname, "dist"),
      library: "vueApp",
      libraryTarget: "umd", // 打包的类型
    },
  },
});

参考链接地址:
vue cli3及以上、vue cli2 的配置信息可以参考以下链接
https://www.npmjs.com/package/change-prefix-loader

;