企业官网建设流程全解析

热门的网站模板,宣传型商务网站,网站结构设计的内容,seo关键词优化最多可以添加几个词记录一次微前端改造#xff1a;把 10 个独立 Vue 项目整合到一起 最近主导了公司前端项目的微前端化改造#xff0c;踩了不少坑#xff0c;也有一些收获。趁着记忆还新鲜#xff0c;把过程记录下来#xff0c;希望能给有类似需求的同学一些参考。 声明#xff1a;我也是第…记录一次微前端改造把 10 个独立 Vue 项目整合到一起最近主导了公司前端项目的微前端化改造踩了不少坑也有一些收获。趁着记忆还新鲜把过程记录下来希望能给有类似需求的同学一些参考。声明我也是第一次做微前端很多地方可能不够规范欢迎大家指正。一、背景我们遇到了什么问题1.1 项目现状公司的前端项目经过几年发展变成了这样10 个独立的 Vue 项目认证系统、主业务平台、教育模块、社区模块、H5 移动端等每个项目都是独立的 Git 仓库有自己的 CI/CD 流程独立部署技术栈不太统一有的是 Vue 2 Vue CLI有的是 Vue 3 Vite用户体验比较割裂在不同系统间跳转时要重新加载整个页面1.2 想解决的问题问题具体表现体验不连贯系统间跳转白屏时间长感觉像在用不同的网站登录状态虽然用 Cookie 共享了 token但体验还是不够好重复建设每个项目都有一套类似的基础代码说实话一开始我对微前端也没什么概念是领导提出想把这些系统整合成一个统一入口我才开始研究这个方向。二、技术选型为什么选 micro-app2.1 调研过的方案方案我的理解为什么没选/选了iframe最简单天然隔离体验不好通信麻烦qiankun最成熟基于 single-spa配置比较复杂子应用改造成本高micro-app京东出的基于 Web Components接入简单改造成本低 ✅Module FederationWebpack 5 的功能我们有的项目还在用 Vue CLI 42.2 选择 micro-app 的原因说实话主要是因为简单。看了官方文档后发现子应用几乎不需要怎么改基座应用也就几行代码// 基座应用启动importmicroAppfrommicro-zoe/micro-appmicroApp.start()// 加载子应用就一个标签micro-app nameapp1urlhttp://localhost:8081//micro-app对于我这种微前端新手来说能快速跑起来比什么都重要。三、项目结构3.1 实际情况需要说明的是我们的项目结构是这样的# 这些都是独立的 Git 仓库我只是在本地建了个文件夹把它们放一起方便开发 project/ # 本地文件夹不是 Git 仓库 ├── project-base/ # 基座应用 - 独立 Git 仓库 ├── project-main/ # 主业务 - 独立 Git 仓库 ├── project-auth/ # 认证系统 - 独立 Git 仓库 ├── project-edu/ # 教育模块 - 独立 Git 仓库 ├── project-community/ # 社区模块 - 独立 Git 仓库 └── ...每个项目都是独立部署的有自己的 Docker 镜像和部署流程。微前端改造并没有改变这一点只是加了一个基座应用来统一加载它们。3.2 端口规划本地开发时我给每个应用分配了不同的端口应用端口路由前缀project-base8080/project-main8081/mainproject-auth8082/authproject-community8083/communitiesproject-edu8085/edu四、具体怎么做的4.1 基座应用基座应用是新建的用的 Vite Vue 3。1. 安装和初始化 micro-app// project-base/src/main.tsimportmicroAppfrommicro-zoe/micro-app;microApp.start({plugins:{modules:{},},});2. Vite 需要配置一下不然会报错// project-base/vite.config.tsvue({template:{compilerOptions:{// 告诉 Vuemicro-app 是自定义元素别当组件解析isCustomElement:(tag)/^micro-app/.test(tag),},},});3. 路由配置// 用通配符匹配子应用的所有路由constroutes[{path:/main/:page*,component:()import(/views/main.vue),},{path:/auth/:page*,component:()import(/views/auth.vue),},// ...];4. 子应用挂载组件!-- project-base/src/views/main.vue -- template micro-app nameproject-main :urlurl baseroute/main / /template script setup const url http://localhost:8081/child/main/; /script4.2 子应用改造子应用的改造确实不多主要是这几步1. 新建 public-path.ts// src/public-path.tsif(window.__MICRO_APP_ENVIRONMENT__){__webpack_public_path__window.__MICRO_APP_PUBLIC_PATH__;}2. 改造入口文件// src/main.tsimport./public-path;// 必须放最前面letappnull;letrouternull;lethistorynull;functionmount(){historycreateWebHistory(window.__MICRO_APP_BASE_ROUTE__||process.env.BASE_URL);routercreateRouter({history,routes});appcreateApp(App);app.use(router);app.mount(#app);}functionunmount(){app?.unmount();history?.destroy();appnull;routernull;historynull;}// 判断运行环境if(window.__MICRO_APP_ENVIRONMENT__){// 微前端环境window[micro-app-${window.__MICRO_APP_NAME__}]{mount,unmount};}else{// 独立运行mount();}3. 配置跨域开发环境// vue.config.jsmodule.exports{devServer:{headers:{Access-Control-Allow-Origin:*,},},};4.3 状态共享这块我承认做得不太规范。按理说应该用 micro-app 提供的通信机制但我们之前的项目已经有一套基于 localStorage Cookie 的方案在用了而且子应用还需要支持独立运行所以就没改。// 公共组件库里的 storeexportdefault{set(key,data){localStorage.setItem(key,JSON.stringify({data}));},get(key){constcachelocalStorage.getItem(key);returncache?JSON.parse(cache).data:null;},// token 用 cookie 存这样可以跨子域共享set_cookie(name,value){document.cookie${name}${value}; path/; max-age${30*24*60*60};},};这个方案的问题不够实时一个应用改了数据另一个应用需要刷新才能看到没有利用 micro-app 的能力但也有好处简单团队都能理解子应用可以独立运行刷新页面不丢数据后续有时间可能会改成用 micro-app 的setGlobalData但目前这样也能用。五、部署每个应用还是独立部署只是 Nginx 配置需要调整一下。基座应用server { listen 80; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } }子应用server { listen 80; location /child/main { root /usr/share/nginx/html; try_files $uri $uri/ /child/main/index.html; } }六、踩过的坑6.1 静态资源 404子应用的图片加载不出来因为路径变了。解决确保public-path.ts配置正确而且要放在入口文件最前面 import。6.2 路由跳转 URL 不变子应用内部跳转后浏览器地址栏没变化。解决路由的 base 要用window.__MICRO_APP_BASE_ROUTE__。6.3 热更新有问题开发时子应用热更新会导致页面白屏。解决子应用关闭热更新hot: false。有点麻烦但暂时没找到更好的办法。6.4 样式偶尔会串虽然 micro-app 有样式隔离但有些全局样式还是会影响。解决尽量用 scoped 样式避免写太通用的选择器。七、目前的效果改造完成后✅ 用户可以在一个页面里切换不同的系统不用重新加载✅ 各个子应用还是可以独立开发、独立部署✅ 子应用也可以单独访问方便开发调试还存在的问题⚠️ 状态共享方案不够优雅⚠️ 没有用到 micro-app 的很多高级功能预加载、keep-alive 等⚠️ 首次加载子应用还是有点慢八、后续想做的研究一下预加载micro-app 支持 preFetch应该能提升切换速度优化状态共享看看能不能用 micro-app 的全局数据机制统一技术栈慢慢把 Vue 2 的项目升级到 Vue 3九、一些想法做完这次改造有几点感受微前端不是银弹。如果项目本身就不大或者团队就几个人可能真没必要搞这么复杂。先跑起来再说。一开始不要想着做到完美能用就行后面再慢慢优化。保持子应用的独立性。我觉得这点很重要子应用能独立运行开发调试都方便很多。文档很重要。我们内部写了一份接入文档新同事照着做基本都能跑起来。十、参考资料micro-app 官方文档micro-app GitHub以上就是这次微前端改造的记录。如有错误或者更好的方案欢迎评论区交流~