老项目vue2.6.14的前端微服务改造方案微前端的思路是基于接口协议：子应用根据接口导出若干个接口协议，主应用在运行过程中调用导出的子应用这些接口基于沙箱隔离：主应用创建一个隔离的环境，子应用基本不需要考虑自己运行在什么环境，并且可以按照普通的开发思路进行开发。基于模块协议：主应用程序将子应用程序视为一个模块，这与模块的使用方式没有区别。解决方案是选择路由，结合iframe分发静态资源。每个人都明白这个问题。阿里乾坤（基于单SPA）：对项目的侵入性比较大。需要介绍一下京东微应用（基于WebComponents）脚手架改造腾讯无界（基于WebComponents），只是开源，对webpack5（module-federation）微服务项目没有深入了解。结合老项目，只需要将vue-service升级到5.0以上即可使用实现思路。主项目订阅服务子项目发布服务架构分为基础组件服务、中层业务模块、对外入口。项目修改内容升级部分依赖，webpack版本升级到5以上，使用其新的module-federationfeature"@vue/cli-service":"~5.0.0","vue":"^2.7.14"，修改入口js添加bootstrap.js存放原入口js文件（main.js），修改mainjswindow.componentsUrl="http://localhost:1006";从“./bootstrap”导入引导程序；引导程序；修改视图。config.js实现bootstrap.js延迟加载{test:/bootstrap\.js$/,loader:"bundle-loader",options:{lazy:true,},},主项目chainWebpack示例（基于本地服务ip订阅）：config.plugin（“module-federation-plugin”）.use（require（“webpack”）.container.ModuleFederationPlugin，[{name：“web”，remotes：{app1：“app1@http://localhost:8084/remoteEntry.js",},},]);子项目链Webpack示例（发布子项目组件或页面）config.plugin("module-federation-plugin").use(require("webpack").container.ModuleFederationPlugin,[{name:"app1",//模块名filename:"remoteEntry.js",exposes:{//对外暴露的组件"./HelloWorld":"./src/components/HelloWorld.vue",},},]);dev代理配置（路由重定向到订阅服务）"/componentsService":{changeOrigin:true,target:process.env.VUE_APP_OA_componentsUrl,pathRewrite:{["^"+"/componentsService"]:"",},},"/workflowService":{changeOrigin:true,target:process.env.VUE_APP_workflowUrl,pathRewrite:{["^"+"/workflowService"]:"",},},页面模块共享示例zc-workflow-web服务发布页面公开：{"./workflowMatters":"./src/views/workflow/workflowMatters/index.vue",}zc-system-web门户服务订阅服务遥控器：{workflow:"workflow@[window.workflowUrl]/workflowRemoteEntry.js",},main.js注册工作流服务路径，并配置代理window.workflowUrl="http://localhost:9001";组件模块共享示例zc-components-web服务暴露组件vue.config.js配置.plugin("module-federation-plugin").use(require("webpack").container.ModuleFederationPlugin,[{...setupModule},]);moduleSetUp.jsconstdependencies=require("./package.json").dependencies;module.exports={name:"oa_components",//模块名称filename:"remoteEntry.js",暴露:{"./ThemeSearchBar":"./src/components/searchBar/src/index.vue",},共享:["vuex","vue-router","element-ui",{vue:{eager:true,singleton:true,requiredVersion:dependencies["vue"],},},],};zc-workflow-web工作流服务服务引用组件vue.config.jsremotes:{oa_components:"oa_components@[window.oa_componentsUrl]/remoteEntry.js",},importThemeSearchBarfrom"oa_components/ThemeSearchBar";exportdefault{install(Vue){Vue.component(ThemeSearchBar.name,ThemeSearchBar);},};根据需要配置nginx独立ip通过proxy_pass代理不同的ip通过proxy_pass代理不同的服务器总结优势组件服务可以安装到静态资源服务器，统一配置文件、字体、图标库，每个模块就是一个服务，不同的业务modules解耦独立安装部署，增加拆解灵活性，按需引入新需求module-federation按需加载合理配置资源服务，中大型项目首屏加载启动速度10秒以内缺点需要自己管理配置风格隔离需要部署服务数量增加易，项目拆分的粒度一定要慎重把握。单个模块不能拆分，需要保证runtimejs的完整性
