学习预加载路由项目有感尝试自己搭建前端已知路由配置情况下的 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) servenpm run (or yarn) build- 加入 Vue3.0 升级。
- 异步路由配置。