前端单页⾯应⽤分布式部署探索
公司后台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 = 'p/home/book.html'
} else if (newPath === '/iframe/order/list') {
returnUrl = 'p/home/drew.html'
}
return returnUrl
},
},
beforeRouteUpdate (to, from, next) {
let newPath =  to.path
this.url = this.changeUrl(newPath)
next()iframe嵌套页面加载慢
}
}
</script>
⽅法changeUrl 可以提取出来，作为⼀个当前路径匹配资源⽂件的转换器. ⼤致的思路就是这样，使⽤正则路由，搭配上路由守卫.监听组件url的改变，从⽽改变ifram的url

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。