基于vue-cli  3.12.1测试

主项目

开启history模式

mode: 'history',

安装single-spa

npm install single-spa --save -d

注册一个子服务路由/vue，只是注册， 不填写component字段

{
    path: '/',
    name: 'home',
    component: Home,
    children:[
    {
        path: '/vue',
        name: 'vue',
    },
    ]
},

配置注册子项目

主项目根目录创建single-spa-config.js

// single-spa-config.js
import * as singleSpa from 'single-spa'; //导入single-spa
/*
* runScript：一个promise同步方法。可以代替创建一个script标签，然后加载服务
* */
const runScript = async (url) => {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        const firstScript = document.getElementsByTagName('script')[0];
        firstScript.parentNode.insertBefore(script, firstScript);
    });
};

singleSpa.registerApplication( //注册微前端服务
    'single-vue', // 子项目名称
    async () => { // 子项目注册函数，用户需要返回 single-spa 的生命周期对象
        await runScript('http://127.0.0.1:3000/app.js');
        return window.singleVue;
    },
    location => location.pathname.startsWith('/vue') // 配置微前端模块前缀
);

singleSpa.start(); // 启动

main.js使用

import './single-spa-config.js'

子项目

安装single-spa-vue

npm install single-spa-vue --save -d

main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import singleSpaVue from "single-spa-vue";

Vue.config.productionTip = false

const vueOptions = {
    el: "#vue",
    router,
    store,
    render: h => h(App)
};

// // 判断当前页面使用singleSpa应用,不是就渲染
if (!window.singleSpaNavigate) {
    delete vueOptions.el;
    new Vue(vueOptions).$mount('#app');
}

// singleSpaVue包装一个vue微前端服务对象
const vueLifecycles = singleSpaVue({
    Vue,
    appOptions: vueOptions
});

// 导出生命周期对象
export const bootstrap = vueLifecycles.bootstrap; // 启动时
export const mount = vueLifecycles.mount; // 挂载时
export const unmount = vueLifecycles.unmount; // 卸载时

export default vueLifecycles;

vue.config.js配置

挂载到window

module.exports = {
    publicPath: "//localhost:3000/",
    // css在所有环境下，都不单独打包为文件。这样是为了保证最小引入（只引入js）
    css: {
        extract: false
    },
    configureWebpack: {
        devtool: 'none', // 不打包sourcemap
        output: {
            library: "singleVue", // 导出名称
            libraryTarget: "window", //挂载目标
        }
    },
    devServer: {
        contentBase: './',
        compress: true,
    }
};

可在浏览器控制打印window.singleVue查看是否存在

配置子项目启动端口微3000，package.json

"serve": "vue-cli-service serve --port 3000 --open"

启动主项目，再启动子项目

访问：

http://localhost:8080/vue

感谢：https://juejin.cn/post/6844904025565954055#heading-12