1.微服务

前端微服务的架构是什么样的？我们可以先来看看后端的微服务实现。一个大的系统被切分成一个个小的模块，而且还可以独立部署，独立对外提供接口服务。大部分返回的数据是json格式。

这样的架构的好处是：某个模块的改动，不会影响（或者影响很小）其他系统模块；另一方面返回统一的数据结构，不同的客户端（pc、android、ios、html5）可以共用同一个接口；第三，微服务划分使得分布式扩展，容器化扩展更加方便，如果系统的某个模块访问量特别大，那么我们只需要对那一个微服务镜像多部署几个，就能提升性能。

2.前端微服务架构

说到微服务，首先想到的都是像springcloud、springboot、docker、k8s等这样的后端技术栈，而前端微服务却很少提及。

问题：

1.后端微服务返回json格式数据，每个客户端依然需要自己编写前端模板来展示数据。

2.不同的第三方系统可能会调用某个微服务，并嵌入到自己的系统中，依然需要写前端模板展示微服务接口返回的数据

构思：

1.能不能直接返回html模板，将微服务接口的数据展示好，直接使用

2.兼容Vue前端框架的路由

实现：

一、非vue第三方项目调用

直接引用编译后的js文件，可以将依赖库不打包，注意的引入方，需要有一个id与vue项目的渲染id一致，js文件加载之后，会自动加载到这个id的元素下

二、vue项目调用

主要思路：父框架要提供方法暴露路由，子模块获取父框架路由并注册进去

1. externalRoutes: [
2. //外部引入的路由
3. {
4. path: ‘/external’,
5. redirect: ‘/permission/page’,
6. alwaysShow: true, // will always show the root menu
7. name: ‘external’,
8. url: ‘http://localhost:8080/dist/column/static/js/app.bundle.js’,
9. description: ‘字段检测’,
10. meta: {
11. title: ‘外部引入’,
12. icon: ‘lock’,
13. roles: [‘admin’, ‘editor’] // you can set roles in root nav
14. },
15. children: [
16. {
17. path: ‘column’,
18. name: ‘column’,//name唯一，对应外部的路由
19. meta: {
20. title: ‘column Demo’,
21. roles: [‘admin’]
22. }
23. },
24. {
25. path: ‘stomp’,
26. name: ‘StompDemo’,//name唯一，对应外部的路由
27. meta: {
28. title: ‘stomp Demo’,
29. roles: [‘admin’]
30. }
31. }
32. ]
33. }
34. ]

2. window.addExternalRouters = function(routers){
3. if(userExternalRoutes && userExternalRoutes.length>0){
4. userExternalRoutes.forEach(item =>{
5. item.component = Layout
6. })
7. routers.forEach(item => {
8. insertComponent(item, userExternalRoutes)
9. })
12. for(const er of userExternalRoutes) {
13. asyncRoutes.push(er)
14. }
16. resetRouter()
17. router.addRoutes(asyncRoutes)
18. store.dispatch(‘permission/generateRoutes’, store.getters.roles)
19. }
20. }

子模块注册

2. if(window.addExternalRouters){
3. const exportRoutes = [
4. {
5. name: ‘column’,
6. component: HelloWorld,
7. description: ‘字段描述’
8. },
9. {
10. name: ‘StompDemo’,
11. component: StompDemo,
12. description: ‘socket长连接’
13. }
14. ]
15. window.addExternalRouters(exportRoutes);
16. }

系统打开之后，首先要加载需要引入的前端微服务的js文件