一、微前端几种方式
1、single-spa
2、阿里飞冰
3、iframe
等等……
其实没什么太多可以说的,上述大家如果体验过那么大致知道原理。其中iframe是想对成本最低的,或者说侵入性最小的。其余两种成本较高。但是总体而言并非不可接受。
其实这个构建模式我之前就用了,只是那会csdn文章迁移过来。就厚颜无耻的再用一次了。
最近进了新公司,感受了别人公司的代码,感触较多。
二、我的构建模式解决了什么问题
1、模块共享
2、独立运行和打包
3、项目保持完整独立
缺陷:
1、公共模块高度依赖耦合,所以请不要存放所有和业务有关的模块
2、路由独立,互不影响
三、实践
原理:
借用vue多页面开发模式,对应的配合对输入命令的不同加载不同的单页面项目即可
本身属于多页面构建模式
但是我比较推崇这种构建模式,这样使得你的项目本身扩展性得到了提高。
并且如果是vue项目的话,那么其实也可以进行多项目融合
1、vue.config.js改造(全量)
const webpack = require("webpack");
//获取命令行参数
const projectName = process.argv[3];
console.log("当前打包项目名称:" + projectName);
//页面配置参数,注意项目名称保持一致,页面结构保持一致
const multiPageConfig = {
//index是特殊的项目,不做多余操作,仅仅用于项目分发
//举例,如判断电脑端和移动端,做首页项目入口
consumer: {
name: "登录平台"
},
blog: {
name: "海天酱油博客"
},
interface: {
name: "接口平台"
},
backstage: {
name: "后台"
}
};
//生成统一的页面配置结构
const multiPage = function() {
let page = {};
for (let item in multiPageConfig) {
page[item] = {
entry: `src/${item}/main.js`,
template: `src/${item}/index.html`,
filename: `${item}.html`,
title: multiPageConfig[item].name,
favicon: `src/${item}/assets/${item}.ico`
};
}
return page;
};
const page = multiPage();
//vue下配置文件参数
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = [
"js",
"css",
"svg",
"woff",
"ttf",
"json",
"html"
];
const vueConfig = {
publicPath: process.env.NODE_ENV === "production" ? "/" : "/", //部署应用包时的基本 URL
outputDir: "dist", //打包目录
pages: projectName ? page[projectName] : page,
productionSourceMap: false, //不输出map文件
configureWebpack: {
plugins: [
//开启gzip压缩
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240,
minRatio: 1,
deleteOriginalAssets: false //是否删除原文件
}),
new webpack.ProvidePlugin({
"window.Quill": "quill/dist/quill.js",
Quill: "quill/dist/quill.js"
})
]
},
devServer: {
proxy: {
"/dream-admin": {
target: "http://127.0.0.1:7001",
changeOrigin: false
// pathRewrite: {
// "^/api": ""
// }
}
}
}
};
console.log(page);
module.exports = vueConfig;
2、代码分析
主要其实全部都在这块代码部分了,这里会生成对应的页面配置信息,然后生成配置信息,最后放入vue的pages里面即可。构建方式相当简单
const webpack = require("webpack");
//获取命令行参数
const projectName = process.argv[3];
console.log("当前打包项目名称:" + projectName);
//页面配置参数,注意项目名称保持一致,页面结构保持一致
const multiPageConfig = {
//index是特殊的项目,不做多余操作,仅仅用于项目分发
//举例,如判断电脑端和移动端,做首页项目入口
consumer: {
name: "登录平台"
},
blog: {
name: "海天酱油博客"
},
interface: {
name: "接口平台"
},
backstage: {
name: "后台"
}
};
//生成统一的页面配置结构
const multiPage = function() {
let page = {};
for (let item in multiPageConfig) {
page[item] = {
entry: `src/${item}/main.js`,
template: `src/${item}/index.html`,
filename: `${item}.html`,
title: multiPageConfig[item].name,
favicon: `src/${item}/assets/${item}.ico`
};
}
return page;
};
3、项目实际目录
目录解析:
assets 静态目录
backstage 后台项目
blog 博客项目
common 公共
components
consumer 消费者项目
interface 接口项目
项目模板
其中template就是根据项目名称来创建的。每个项目的结构都被约束成了这样的结构。