官网地址：https://zh-hans.single-spa.js.org/docs/getting-started-overview
优点：路由劫持，应用加载
缺点：singleSpa 不够灵活，不能动态加载js文件；样式不隔离，没有js沙箱的机制
1、新建项目
// 生成子应用
vue create child-vue
生成父应用
vue create parent-vue
2、子应用
子应用main.js文件
- 微应用路由改造，添加一个特定的前缀
- 微应用入口改造，挂载点变更和生命周期函数导出
- 打包工具配置更改
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import singleSpaVue from 'single-spa-vue'
Vue.config.productionTip = false
// 我们需要父应用加载子应用
// bootstrap mount unmount
// single-spa-vue
const appOptions = {
el: '#childRoot',
router,
render: h => h(App)
}
const vueLifeCycle = singleSpaVue({
Vue,
appOptions
});
//如果是父应用引用我
if(window.singleSpaNavigate){
__webpack_public_path__ = 'http://localhost:10000/';
}
// 为了独立可以独立运行
if(!window.singleSpaNavigate){
delete appOptions.el;
new Vue(appOptions).$mount('#app')
}
// 协议接入，我们定义好了，父应用会调用这些方法
export const bootstrap = vueLifeCycle.bootstrap;
export const mount = vueLifeCycle.mount;
export const unmount = vueLifeCycle.unmount;
// 我们需要父应用加载子应用，将子应用打包成一个个的lib去给父应用使用
vue.config.js
module.exports = {
configureWebpack: {
output: {
library: 'singleVue',
libraryTarget: 'umd',
},
devServer: {
port: 10000
}
}
}
//相当于导出 window.singleVue.bootstrap
3、主应用
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerApplication, start } from 'single-spa';
Vue.config.productionTip = false
async function loadScript(url){
return new Promise((resolve, reject)=> {
let script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
registerApplication(
'myVueApp',
async ()=> {
console.log('加载模块');
// systemJS
await loadScript('http://localhost:10000/js/chunk-vendors.js');
await loadScript('http://localhost:10000/js/app.js');
return window.singleVue;
},
// 用户切换到/child-vue 的路径下，我需要加载刚才定义子应用
location => location.pathname.startsWith('/child-vue'),
{
a: 'aaaaaa'
}
);
start();
new Vue({
router,
render: h => h(App)
}).$mount('#app')
App.vue
<template>
<div id="app">
<router-link to="/child-vue">加载子应用</router-link>
<!--子应用放的位置-->
<div id="childRoot"></div>
</div>
</template>
<style>
</style>
image.png
