一、一套微前端框架通常包含四个部分:

1.加载器(SystemJs,https://github.com/systemjs/systemjs)

2.包装器(singleSpa,https://single-spa.js.org/docs/getting-started-overview.html

3.主应用

4.子应用

这里重点介绍一下,主应用,子应用的搭建过程,首先通过vue-cli创建2个vue应用,vue_main主应用,vue_child子应用


二、修改主应用vue_main

  1. 修改index.html,在head部分添加以下代码:

<meta name="importmap-type" content="systemjs-importmap">
   <script type="systemjs-importmap">
   {
     "imports": {
     "child": "
http://localhost:8081/app.js", // 确保文件浏览器中可以打开
     "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
     "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",
     "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js"
     }
   }
   </script>
   <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js" as="script" crossorigin="anonymous" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js"></script>

2.修改app.html

<template>
 <div id="app">
   <img src="./assets/logo.png">
   <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App',
 mounted () {
   window.System.import('single-spa').then((res) => {
     var singleSpa = res
     singleSpa.registerApplication('child', () => window.System.import('child'), location => true)
     singleSpa.start()
   })
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

这样主应用就修改好了


三、修改子应用vue_child

1.安装项目依赖

npm i single-spa-vue systemjs-webpack-interop

2.修改入口文件main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import { setPublicPath } from 'systemjs-webpack-interop'
import Vue from 'vue'
import App from './App'
import singleSpaVue from 'single-spa-vue'
import router from './router'
setPublicPath('child')

Vue.config.productionTip = false

/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

const vueLifecycles = singleSpaVue({
 Vue,
 appOptions: {
   render: (h) => h(App),
   router
 }
})

export const bootstrap = vueLifecycles.bootstrap
export const mount = vueLifecycles.mount
export const unmount = vueLifecycles.unmount

3.修改webpack配置文件webpack.base.conf.js

  output: {
   path: config.build.assetsRoot,
   filename: '[name].js',
   library:'child',  // 新添加
   libraryTarget: 'umd',  // 新添加
   publicPath: process.env.NODE_ENV === 'production'
     ? config.build.assetsPublicPath
     : config.dev.assetsPublicPath
 },

4.修改webpack配置文件webpack.dev.conf.js,确保子应用允许跨域

devServer: {
   headers:{
     "Access-Control-Allow-Origin":"*"
   }
}


四.运行项目查看效果,这样在主应用中加载了子应用的内容

1604369787775988.png


五、通过脚手架生成子应用

npm init single-spa


上一篇:云主机部署Python Django

下一篇:本地搭建https nodejs服务器