学习预加载路由项目有感尝试自己搭建前端已知路由配置情况下的 Vue 微前端解决方案。
- 子项目支持单独开发,单独部署;因此可以多人同时开发子项目再进行合并部署。
- 单一的入口 HTML.
- 支持 JS 和 TS.
-
Lerna
Lerna
是一个用于管理具有多个包的JavaScript
项目的工具,它采用monorepo
(单代码仓库)的管理方式。主要使用其可以管理多个项目的 package.json 文件以及可以共用
devDependencies
的特性。使用
lerna link convert
命令,将子项目中公共的依赖(例如babel
、eslint
等)放到根目录的 package.json 文件中;一方面保证版本的统一,另一方面减少存储空间以及依赖安装的速度。 -
vue-cli 3 library
子项目使用 Vue 脚手架
library
模式进行打包,方便主项目引用。在
library
模式中,Vue 是外置的;也就是说包中不会有 Vue,即便在代码中进行导入。 -
插入子项目 script 标签到主项目
在主项目进行编译时,将子项目的入口文件以
script
标签的形式插入到主项目html
中。子项目的
script
标签必须在主项目 app.js 文件之前,为了获取到所有的路由配置。为了减少项目压力,避免首次加载过久,因此主项目建议只做路由管理(也可以进行常规开发)。 -
Route、Vuex
子项目路由统一注册到
Vue.__share__.routes
上,主项目获取后拼接路由并实例化。因此路由需要子项目先注册,主项目统一获取。Vuex 恰恰相反,因为主项目中存储的一定是所有项目都可以使用的公共数据,因此现在主项目入口文件中实例化然后挂载到
Vue.__share__.store
上,然后在子项目 App.vue 中获取到Vue.__share__.store
并调用store.registerModule(‘app-x', store)
进行子项目store
注册。 -
打包
由于主项目要访问子项目的资源,所以需要在主项目中进行代理转发配置;
本地开发时使用
proxy
配置,线上部署时可以通过ngnix
转发或者打包后主项目子项目同一文件夹按照相对路径引用的方式。 -
缓存问题
子项目缓存严重,因此推荐服务端进行子项目入口文件添加协商缓存。
npm run (or yarn) bootstrap
# 端口: 10240
npm run (or yarn) serve
npm run (or yarn) build
- 加入 Vue3.0 升级。
- 异步路由配置。