终极解决方案 哈哈哈 找了很久的文档 终于解决啦 耶!
参考各位大神的解决方法 自己运行后实验了下成功啦
注:写一个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