目录1.背景1.1微前端服务1.2single-spa1.3import-map2.如何安装2.1子项目添加single-spa配置项3.如何开发3.1如何开发3.2子项目如何打包4.其他问题4.1子项目文件路径为4044.2element-ui图标无法显示4.3渲染错误项4.4如何实现两栏布局和item可以在右侧切换5.更多1.背景先简单介绍一下背景~为什么要用single-spa？是因为业务逐渐繁荣，衍生出很多互不依赖的独立服务。这时候就需要引入微服务的概念。那么什么是微服务？根据AmazonCloud的说法，微服务是：微服务是一种用于开发软件的架构和组织方法，它由通过定义明确的API进行通信的小型独立服务组成。这些服务由各种小型独立团队处理。微服务架构使应用程序更易于扩展，开发速度更快，从而加速创新并缩短新功能的上市时间。图：将单体应用拆分成微服务也就是说，一开始，业务是一个单体架构。随着业务的发展，增加或完善单体应用的功能变得更加复杂，限制了业务的发展。这时可以将独立的服务抽象成组件，以满足各种服务更新、部署和扩展的需要。当后端的概念应用到前端，前端微服务/微前端服务就诞生了，我们简称为微前端。比如百度云的服务，数据存储是一个独立的服务，语音识别是一个独立的服务。不同的服务聚合到百度云系统中，可以做成一个微服务系统。1.1微前端服务微前端架构是一种类似于微服务的架构。由ThoughtWorks于2016年提出，将微服务的概念应用到浏览器端，也就是将Web应用从单一的单体应用转变为多个小前端应用聚合为一个的应用。由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。微前端服务系统如图，root-config是项目的中心，用于启动项目，而module1、module2等其他模块是独立的，可以嵌入进入项目。本文主要介绍基于single-spa的前端微服务。1.2single-spasingle-spa是前端微服务的JavaScript前端解决方案。特点：（兼容各种技术栈）在同一个页面中使用多种技术框架（React、Vue、AngularJS、Angular、Ember等技术框架），无需刷新页面。（无需重构现有代码）使用新的技术框架编写代码，现有项目中的代码无需重构。（更好的性能）每个独立模块的代码都可以按需加载，不会浪费额外的资源。每个独立的模块都可以独立运行。1.3import-mapimport-map的实现是single-spa的核心部分，我们首先要知道什么是import-地图。先来看两段代码importmomentfrom'moment'；导入“http://momentjs.com/downloads/moment.js”；这是一个典型的es6ESModule代码，但浏览器现在不支持它。为了让浏览器支持它，我们需要让它兼容。我们将上面的代码写在一个文件中，显然第一行不能正常运行，但是第二行可以正常运行，但是如果我们想让第一行正常运行，import-map就可以出场了。只需在html文件中写入如下内容：.但是浏览器现在不支持它。如果你想让它支持它，你需要引入system.js。在使用single-spa的过程中，我们需要使用import-map导入根目录下的所有模块文件和子项目项目，这样就可以在其他项目中引用模块。上面说了，moment可以想象成一个子项目。然后优化一下，变成=>而在import-map.json文件中是{"imports":{"module":"https://[cdn-link].js",}}那么我们开发者需要做的就是将模块文件打包成一个单独的cdn文件，然后在根目录下-config中引入import-map.json，实现子模块的引入。（当然import-map.json也是放在cdn上的）二、如何安装了解了大致原理后，就可以开始修改single-spa了.您可以单击此处查看在线单水疗中心地址。首先拉下root-config，也就是我们的根文件。2.1子项目添加single-spa配置项//package.json"dependencies":{+"single-spa-vue":"^1.8.2",+"systemjs-webpack-interop":"^2.1.0",},"devDependencies":{+"vue-cli-plugin-single-spa":"^1.1.0",},//main.js+import"./set-public-path";+importsingleSpaVuefrom"single-spa-vue";+constvueLifecycles=singleSpaVue({+Vue,+appOptions:{+render:h=>h(App),+路由器,+store+}+});+exportconstbootstrap=vueLifecycles.bootstrap;+exportconstmount=vueLifecycles.mount;+exportconstunmount=vueLifecycles.unmount;在main.js目录下新建一个set-public-path.js文件。//set-public-path.js+import{setPublicPath}from"systemjs-webpack-interop";+setPublicPath("@[projectname]/[modulename]");**!!删除原来的vue.config.js文件，复制到已有项目的vue.config.js文件中。！！如果需要在原有模块中开发而不是跨项目开发，需要保留一份原有配置。**（如果还是看的有点懵，安装请参考沈墨这篇文章。）三、如何开发3.1如何开发npmrunstart启动root-config.js在浏览器控制台输入localStorage.setItem('devtools',true);，打开import-map插件。npmrunserve启动子项目。在import-map指向的地址，将子项目指向的路径修改为本地项目指向的路径。比如本地启动的项目地址是module1（http://localhost:8081/），点击import-map修改地址为http://localhost:8081/js/app.js。js/app.js由打包路径决定。可以在子模块的启动地址在控制台的源码中查看。3.2如何打包子项目在微服务的组件引用中，由于CDN的引入，需要将文件打包成一个单独的js文件，并且vue-cli3-service（文件路径位于node_modules/_@vue_cli-service@4.3.1@@vue/cli-service/lib/config，没找到github地址）内置了一些webpack配置，还有一些配置是关闭的，打包成一个支持system.js的文件。我们需要做的是：将项目打包成可以导入的文件，去掉codesplitting的配置（codesplitting会生成一个chunk-vendors文件），去掉mini-css-extract-plugin（插件会提取组件中的css）代码如下//vue.config.jsprocess.env.VUE_CLI_CSS_SHADOW_MODE=true;//移除css和js分离的配置module.exports={chainWebpack:config=>{config.optimization.delete('splitChunks')//关闭代码拆分config.output.filename('app.js').library('@[library]/[sub-project]').libraryTarget('amd')//打包方法.end()}...}不过上面都是扯淡。...其实这些东西只需要一个插件就可以解决。原作者写了vue-cli-plugin-single-spa插件，直接安装即可。npminstallvue-cli-plugin-single-spa-D四、其他问题4.1子项目文件路径404经过以上过程打包后，打包后的文件为/dist/js/app.js。在原作者写的插件中，将文件路径改写如下：就是这样。如果还是404，可能项目打包在不同的路径下，需要在浏览器中打开子项目的标签页查看文件地址。4.2element-ui图标无法显示需要注意的是，vue-cli-plugin-single-spa插件不处理文本等静态资源，所以虽然npmrunbuild没有显示静态资源被打包成单独的文件，但实际上还是被打包成静态文件。解决这个问题最好的办法就是把element-ui转成cdn，而不是node_module。4.3项目渲染错误明明指向项目A，却渲染成项目B，插件中配置的文件路径错误。可能是项目A的8080端口配置为8081端口，在多项目开发的时候特别容易出现这个问题。4.4如何实现两列布局右侧的可切换项之前天真地以为可以把子项变成路由组件然后直接导入，其实没有实现。由于项目耦合度过高，依赖于各个插件，无法打包成一个组件。所以它本质上是两个并排的DOM节点。但是我们可以实现假的效果。在菜单栏的router中设置，{path:'/',component:Home,name:'home',redirect:'/sub-project',children:[{path:'sub-project/*',name:'sub-project',}]}，为什么要加星号？这是为了解决另一个问题。如果不加通配符，如果子项目有一些router转换，navbar将无法正常匹配。为了匹配子项目中对应的router，需要设置base:'sub-project'然后设置菜单栏中的float，右边margin对应的宽度就够了。五更https://www.youtube.com/watch...什么是微服务从0实现一个single-spa前端微服务single-spavue-microfrontends使用微前端构建单页应用程序。以上就是single-spa的简单介绍。喜欢的话可以给个小赞哦，谢谢~
