一、首先創(chuàng)建一個基于vue腳手架的項(xiàng)目工程，命名為parent

vue create parent

　　

1.針對這個parent項(xiàng)目：

安裝single-spa

npm install single-spa --save -d

安裝后的效果

2.設(shè)置子項(xiàng)目路由

在路由中注冊統(tǒng)一路由，我們注冊一個子服務(wù)路由，不填寫component字段

{
    path: '/single-router',
    name: 'single-router'
}

3.搭建子項(xiàng)目入口

4.注冊子項(xiàng)目

使用single-spa注冊子項(xiàng)目

singleSpa.registerApplication：這是注冊子項(xiàng)目的方法。參數(shù)如下：

appName: 子項(xiàng)目名稱
applicationOrLoadingFn: 子項(xiàng)目注冊函數(shù)，用戶需要返回 single-spa 的生命周期對象。后面我們會介紹single-spa的生命周期機(jī)制
activityFn: 回調(diào)函數(shù)入?yún)?code>location對象，可以寫自定義匹配路由加載規(guī)則。

singleSpa.start：這是啟動函數(shù)。

在項(xiàng)目中新建一個single-spa-config.js，并在main.js中引入

single-spa-config.js

// single-spa-config.js
import * as singleSpa from 'single-spa'; //導(dǎo)入single-spa
/*
* runScript：一個promise同步方法。可以代替創(chuàng)建一個script標(biāo)簽，然后加載服務(wù)
* */
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( //注冊微前端服務(wù)
    'singleDemo', 
    async () => {
        await runScript('http://127.0.0.1:3000/js/chunk-vendors.js');
        await runScript('http://127.0.0.1:3000/js/app.js');
        return window.singleVue;
    },
    location => location.pathname.startsWith('/vue') // 配置微前端模塊前綴
);
singleSpa.start(); // 啟動

二、創(chuàng)建一個子項(xiàng)目，命名為vue-child1

1.安裝single-spa-vue包

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

　　

總結(jié)

以上是生活随笔為你收集整理的前端微服务搭建（Single-Spa + Vue Cli）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。