上海海域邦建设集团网站备案点访问失败怎么办?
摘要:上海域邦建设集团网站,网站备案点不进去,向谷歌提交网站,中美最新消息前言 随着技术的飞速发展,我们公司内部一个基于“上古神器” jQueryPHP 构建的十年历史老项目已显力不从心&#xff
上海域邦建设集团网站,网站备案点不进去,向谷歌提交网站,中美最新消息前言 随着技术的飞速发展#xff0c;我们公司内部一个基于“上古神器” jQuery PHP 构建的十年历史老项目已显力不从心#xff0c;技术非常老旧且维护成本高昂#xff0c;其实已经无数次想要重构#xff0c;但是苦于历史遗留原因以及业务的稳定性而一直难以下手#xff0…前言 随着技术的飞速发展我们公司内部一个基于“上古神器” jQuery PHP 构建的十年历史老项目已显力不从心技术非常老旧且维护成本高昂其实已经无数次想要重构但是苦于历史遗留原因以及业务的稳定性而一直难以下手而且一时半会又不能全部重构。本次新页面较多且后续将持续迭代新模块而老页面的改动较少且代码库错综复杂牵一发而动全身。 经过几番思考我们发现微前端是一种非常实用的去实施渐进式重构的架构很适合用微前端技术来完成本次需求最终决定利用 Vue3 Vite 搭建一个全新的基座主应用作为新旧系统融合的桥梁将原来的老项目接入到基座后面的新需求都在新项目里面开发就行不用再动老项目。此举不仅实现了新页面用 Vue3 开发而且老项目也能和新项目融合在一起既保持了旧系统的稳定运行又引入了新技术栈的活力。 同时鉴于我们另一个 Vue2 webpack 项目也同样面临技术过时和项目规模庞大的问题每次开发时运行起来非常卡顿打包很慢后期难以维护也需要用微前端来进行一些拆分不可能一直往该项目上堆代码。 所以我们决定一步到位设计了一套微前端项目模板将微前端的核心配置抽象为可复用的插件并结合自研组件库、HTTP请求、权限控制等插件构建了一个全面的项目脚手架旨在简化未来项目的搭建流程提升开发效率确保技术栈的先进性与可持续性。 微前端框架选型MicroApp 从对⽐图可以看出⽬前开源的微前端框架中有的功能 Micro App都有并提供了⼀些它们不具备的功能⽐如静态资源地址补全元素隔离插件系统等。 我们本次项目使用的是 Vue3ViteTypeScript 的技术栈在综合对比了各个框架之后认为MicroApp是最适合我们当前现实情况的。原因有下 使用简单将所有功能都封装到一个类WebComponent组件内从而实现在基座应用中嵌入一行代码即可渲染一个微前端应用。 不需要像 single-spa 和 qiankun 一样要求子应用修改渲染逻辑并暴露出方法也不需要修改webpack配置是目前市面上接入微前端成本最低的方案。 功能丰富提供了 js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的功能。 零依赖这赋予它小巧的体积和更高的扩展性。 兼容所有框架为了保证各个业务之间独立开发、独立部署的能力micro-app做了诸多兼容在任何技术框架中都可以正常运行。 侵入性低对原代码几乎没有影响。 组件化基于webComponents思想实现微前端。
微前端架构设计pnpmmonorepo 使用 pnpm 和 monorepo 管理项目依赖和代码结构确保所有子应用和基座应用都位于同一仓库的不同目录下便于集中管理和版本控制。
/root
|-- /packages |-- /main-app # 基座应用 |-- /old-app-wrapper # 老项目接入容器 |-- /new-module-a # 新应用A |-- /new-module-b # 新应用B ...
|-- /pnpm-workspace.yaml
|-- /package.json 基座应用Main App 使用 Vue 3 Vite 搭建的基座应用将成为整个系统的核心负责路由管理、权限验证、资源加载等基础设施功能。基座应用应保持轻量级避免过度耦合并提供必要的API和事件系统供子应用使用。 子应用Micro Apps 老项目接入旧应用容器将老项目PHPjQuery作为一个子应用确保与基座应用的隔离和独立运行。新建一个项目用于专门展示老项目页面先在路由表中给所有路由都添加一个 iframeUrl参数(存的是旧页面的地址)并封装一个 iframe 组件在组件中监听路由变化动态更新Iframe的src每一次切换路由就将页面的地址传入 iframe 组件从而加载出对应的老页面。 新模块开发新应用容器新页面和模块直接在Vue 3项目中开发利用Vue 3的Composition API、响应式系统等优势提高开发效率和代码质量。当旧系统中有某个部分要重构时则将旧项目中的路由下线并将重构后的模块进行上线实现无缝替换。 通信机制 建立基座应用与子应用之间的有效通信机制如使用自定义事件、全局状态管理如Vuex或Zustand或专门的通信库。
