--- theme: channing-cyan highlight: dracula --- ## 背景公司做了两年多的项目，已经算是个巨石应用了。整个项目中包含了好几个相对独立的功能模块，之前都是独立分布在各个后台管理系统中，为了让用户使用方便，统一账号体系，把它们都揉合到了一个项目里。日积月累，已不堪重负(代码量，打包时间，运行时间，开发体验，维护成本)，苦它久矣！现在有机会把项目中的几个功能模块提前出来做商业化，这正是一次重构的机会！ ## 微前端框架选型我们团队的主要技术栈就是`vue`,选择`micro-app`就是看中了它的简洁和侵入性弱,这样接入成本就低了很多，更喜欢它基于WebCompoent的实现原理。这次`vue3`没有选择`vite`作为打包工具，主要还是对`vite`的微前端方案适配代价巨大，前方不知道还有没有什么坑，所以暂时不去踩坑。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5a34f13896f4fe6a56528e30f6d10eb~tplv-k3u1fbpfcp-watermark.image?) ## pnpm 初始化项目 `lerna`已经停止更新维护了，很多知名的开源项目都选择了`pnpm`,我们也是紧跟时代潮流。安装`pnpm`： ```bash npm i pnpm -g ``` 初始化项目： ```bash pnpm init -y ``` 新建一个`pnpm-workspace.yaml`文件： ```yaml packages: - 'packages/**' ``` 新建一个`packages`目录，在里面建立几个模块： ``` ├── packages | ├── base // 基座 | | ├── package.json | ├── dataCenter // 数据中心 | | ├── package.json | ├── share // 共享模块 | | ├── package.json ├── package.json ``` ### 初始化vue项目在`packages/base`目录下创建一个`vue3 + ts`的项目。因为我们技术栈都是`vue`,我们可以将公共使用的依赖拷贝到根目录下的`package.json`中，进行统一安装。 ```javascript "dependencies": { ... "@element-plus/icons-vue": "^2.0.1", "axios": "^0.27.2", "element-plus": "^2.2.2", "pinia": "^2.0.14", "vue": "^3.2.25", "vue-router": "^4.0.12" ... }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", ... "babel-loader": "^8.2.5", ... } ``` 在根目录下执行命令： ```javascript pnpm i -w // -w, --workspace-root 表示在根目录下安装 ``` ### 初始化公共模块在 `packages` 下新建一个`share`目录: ``` ├── share | ├── components // 公共组件 | ├── style // 公共样式 | ├── utils // 公共方法 ├── package.json ``` 通过`link`机制实现`package`包之间的依赖引用： ```javascript pnpm i pnpm i [packageName]@workspace --filter [packageName] // 通过filter 过滤需要关联依赖的package ``` ```javascript "dependencies": { ... "@ultra/share": "workspace:^0.1.0", // 通过 workspace协议为本地引用 ... }, ``` 我们可以在`share/components`下新建一个测试用的组件： ```javascript ``` ```javascript // packages/base/scr/app.vue ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ec5ff2ef9714a24ac278274010844b6~tplv-k3u1fbpfcp-watermark.image?) 其他`share`目录下的模块，也用类似的方式引用：`@ultra/share/style/index.less`,`@ultra/share/utils/index.ts`。 ## micro-app 微前端实现关于`micro-app`的安装配置内容，建议前往官方文档，查看对应框架的配置说明，手把手教学，简单易上手，侵入性低。[官方文档!](https://zeroing.jd.com/docs.html#/zh-cn/framework/vue) ### 实现基座 - 在`base`项目中安装`micro-app` ```javascript pnpm i @micro-zoe/micro-app --filter @ultra/base ``` - 在入口里引入： ```javascript // main.ts import microApp from '@micro-zoe/micro-app'; microApp.start(); createApp(App).use(router).mount('#app'); ``` - 分配一个子路由： ```javascript const routes: Array = [ ... { // 👇 非严格匹配，/popularize/* 都指向 Popularize 页面 path: '/popularize/:page*', name: 'Popularize', component: () => import('../views/popularize.vue') } ... ] ``` ```javascript ``` ### 配置子应用 - 配置跨域支持： ```javascript // vue.config.js devServer: { headers: { 'Access-Control-Allow-Origin': '*', } } ``` - 设置基础路由：如果基座是history路由，子应用是hash路由，这一步可以省略 ```javascript // router/index.ts import { createRouter, createWebHistory } from 'vue-router' import routes from './router' const router = createRouter({ // 👇 __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由 history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL), routes, }) ``` - 设置 publicPath: ```javascript // publicPath.ts // __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量 // @ts-ignore if (window.__MICRO_APP_ENVIRONMENT__) { // @ts-ignore __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ } ``` ```javascript // main.ts import './publicPath.ts'; ``` ### 运行项目在根目录下的`package.json`中新增脚本： ```javascript "scripts": { "serve": "pnpm run --parallel serve", "build": "pnpm run --parallel build" } ``` 通过`--parallel`会执行所有`package`中的`serve`命令。更多pnpm 命令的配置请查看[官方文档](https://pnpm.io/zh/cli/run)。 ## 部署官方强烈建议我们保持开发环境和线上环境路径(*即webpack的publicPath*)的一致性。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10534ba99c2c42bcbfcff9c8e035e16c~tplv-k3u1fbpfcp-watermark.image?) 所以先考虑好上线部署的目录结构： ``` ├── html | ├── micro // 基座 | ├── popularize // 子应用 | ├── child1 // 子应用 ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67a6e998694142f4bad20daba6445049~tplv-k3u1fbpfcp-watermark.image?) 在`vue.config.js`中需要配置好对应的publicPath: ```javascript module.exports = { publicPath: '/micro/' } ``` 主应用的路由中还得配置一下`baseRoute`: ```javascript const router = createRouter({ history: createWebHistory('/micro'), routes }); ``` `nginx`配置: ```javascript location /popularize { alias html/popularize; add_header Access-Control-Allow-Origin *; if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){ add_header Cache-Control max-age=7776000; add_header Access-Control-Allow-Origin *; } try_files $uri $uri/ /popularize/index.html; index index.html index.htm; } location /micro { alias html/micro; try_files $uri $uri/ /micro/index.html; index index.html index.htm; } ``` 线上体验地址： http://www.finget.xyz/micro/home （服务器配置低，访问有点慢！）仓库地址：https://github.com/FinGet/micro-demo/tree/pnpm