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.  
    ]

1.  
    
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.  
   })
10.  
     
11.  
     
12.  
    for(const er of userExternalRoutes) {
13.  
    asyncRoutes.push(er)
14.  
    }
15.  
     
16.  
    resetRouter()
17.  
    router.addRoutes(asyncRoutes)
18.  
    store.dispatch('permission/generateRoutes', store.getters.roles)
19.  
    }
20.  
    }

子模块注册

1.  
    
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文件