微前端思考,vue多页面项目独立打包和个人推荐的vue建项模式
2020/3/18 11:01:31
本文主要是介绍微前端思考,vue多页面项目独立打包和个人推荐的vue建项模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、微前端几种方式
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就是根据项目名称来创建的。每个项目的结构都被约束成了这样的结构。
这篇关于微前端思考,vue多页面项目独立打包和个人推荐的vue建项模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南