前端单页面应用分布式部署探索

    公司后台Java使用的Spring Cloud的微服务框架,订单,商品,报价,每一个模块都是一个微服务,一个包,独立打包,单独部署.避免了业务代码之间的强耦合,包也变小了.这是背景.

      近两天,公司项目准备重构,领导让我们调研一下将前端项目也重构成微服务模式,即,各个模块单独打包,分别部署,再推辞不掉,我开始了前端分布式的探索.

   将前端分包编译,部署,首先想到的思路是使用webpack来实现.但研究了几天,看了很多webpack的配置文档,无奈,换个思路吧,

将每个模块单独编译成一个包,然后使用iframe嵌套到基础框架包里面,虽然使用iframe嵌套的方式有很多缺点,但目前也只有这么一条路行的通了.

但是这条思路有几个问题需要提前解决一下

1:外部路由定位到内部内容的问题

2:组件资源依赖,版本管理的问题

3:域名部署,iframe操作的封装

4:跨应用 跨iframe的状态管理.

接下来我一个一个来解决

  在路由router.js中这写一个组件

  

   

    

     

    
    

     

      {
     
    
   

    

     

    
    

     

            path: '/iframe',
     
    
   

    

     

    
    

     

            name: 'iframe',
     
    
   

    

     

    
    

     

            component: () => import(/* webpackChunkName: "about" */ './views/Iframe.vue'),
     
    
   

    

     

    
    

     

            children: [
     
    
   

    

     

    
    

     

              {
     
    
   

    

     

    
    

     

                path: '/iframe/*',
     
    
   

    

     

    
    

     

                component: ()=> import('./views/OtherMain.vue'),
     
    
   

    

     

    
    

     

                name: '加载外部的内容'
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

            ]
     
    
   

    

     

    
    

     

          }
     
    
  
 

这个就是存放iframe的组件

OtherMain.vue组件中代码如下:

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     
  <div class="about">
     
    
   

    

     

    
    

     

          1111111111111
     
    
   

    

     

    
    

     
    <h1>{{url}}</h1>
     
    
   

    

     

    
    

     
    <iframe :src="url"></iframe>
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     
  name:'',
     
    
   

    

     

    
    

     

        data () {
     
    
   

    

     

    
    

     
    return {
     
    
   

    

     

    
    

     
      url: ''
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  mounted() {
     
    
   

    

     

    
    

     
    let newPath = this.$router.currentRoute.fullPath
     
    
   

    

     

    
    

     
    this.url = this.changeUrl(newPath)
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  methods: {
     
    
   

    

     

    
    

     

          changeUrl (newPath) {
     
    
   

    

     

    
    

     
      let returnUrl = ''
     
    
   

    

     

    
    

     
      if (newPath === '/iframe/product/list'){
     
    
   

    

     

    
    

     

              returnUrl = 'http://mczaiyun.top/home/book.html'
     
    
   

    

     

    
    

     

            } else if (newPath === '/iframe/order/list') {
     
    
   

    

     

    
    

     

              returnUrl = 'http://mczaiyun.top/home/drew.html'
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     
      return returnUrl
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

        beforeRouteUpdate (to, from, next) {
     
    
   

    

     

    
    

     
    let newPath =  to.path
     
    
   

    

     

    
    

     
    this.url = this.changeUrl(newPath)
     
    
   

    

     

    
    

     
    next()
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
  
 

方法changeUrl 可以提取出来,作为一个当前路径匹配资源文件的转换器. 大致的思路就是这样,使用正则路由,搭配上路由守卫.监听组件url的改变,从而改变ifram的url

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/88548381