微前端（qiankun,webpack5模块联邦）

1singleSpa

vue

出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.

临时方案

export NODE_OPTIONS=--openssl-legacy-provider

总结

子应用

子应用独立运行

判断是不是在父应用

if(window.singleSpaNavigate){
  __webpack_public_path__='http://localhost:20000/'
}else{
  new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
}

子应用统一前缀

const router = new VueRouter({
  mode: 'history',
  base: '/vue',
  routes
})

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


const appOptions={
  el:'#vue',
  router,
  render:h=>h(App),
}
const lifeCycle=SingleSpaVue(
  {
      // createApp,
      Vue,
      appOptions,
  }
)
//独立运行
if(window.singleSpaNavigate){
  __webpack_public_path__='http://localhost:20000/'
}else{
  new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
}
//
export const bootstrap=lifeCycle.bootstrap;
export const unmount=lifeCycle.unmount;
export const mount=lifeCycle.mount;

// new Vue({
//   router,
//   render: h => h(App)
// }).$mount('#app')

vue.config.js

module.exports={
    configureWebpack:{
        output:{
            library:'singleVue',
            libraryTarget:'umd'
        },
        devServer:{
            port:20000
        }
    }
}

父应用

1-给元素承载子应用内容 App.vue

<template>
  <div id="nav">
    <router-link to="/vue">加载vue</router-link> 
      <router-view/>

      <div id='vue'></div>

  </div>
</template>

别忘记start

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {registerApplication,start} from 'single-spa'

async function loadScript(url){
    console.log(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('childvue',async()=>{
    console.log('load')
    await loadScript('http://localhost:20000/js/chunk-vendors.js');
    await loadScript('http://localhost:20000/js/app.js');
    return window.singleVue
},location=>location.pathname.startsWith('/vue')) //用户切换到了/vue路由下，我要加载vue子应用
start()
createApp(App).use(router).mount('#app')

2qiankun

3模块联邦