创建项目

安装脚手架

single-spa有官方自带的一个脚手架create-single-spa，用于快速创建项目。首先需要全局安装脚手架

yarn global add create-single-spa

基座用于插拔子应用。执行 create-single-spa base创建基座，也就是根应用。执行命令后，出现如下所示：

第三个即为创建根应用。

分别执行 create-single-spa react-app,create-single-spa vue-app创建一个react子应用和vue子应用。然后选择第一个single-spa application /parcel即可.

安装完成之后，目录结构如下所示

首先在vue项目的根目录下创建vue.config.js用于修改端口号，如下所示

然后需要修改vue项目里的路由，将vue项目路由的base修改为/vue,如下所示

此时要访问vue项目里的About页，相当于访问路由/vue/about

同样的，修改react的端口号为4000，这里就不写配置文件了，直接在package.json里改

然后修改react项目的base路由为/react

子应用需要在父应用中注册，找到base应用下src下的root-config.js文件，在这里进行子应用注册

在src下的index.ejs里面，需要指定加载子应用的路径

在src下的index.ejs里面，需要指定加载子应用的路径

注意：因为React子应用中，默认会把react和react-dom做了抽离（webpack的externals）,所以，直接在9000端口下访问会报以下错误：

此时需要在父应用的index.ejs中引入外部模块react和react-dom

至此，基于single-spa搭建的包含vue子应用和react子应用的微前端应用就完成了