一、首先創建一個基于vue腳手架的項目工程，命名為parent

vue create parent

　　

1.針對這個parent項目：

安裝single-spa

npm install single-spa --save -d

安裝后的效果

2.設置子項目路由

在路由中注冊統一路由，我們注冊一個子服務路由，不填寫component字段

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

3.搭建子項目入口

4.注冊子項目

使用single-spa注冊子項目

singleSpa.registerApplication：這是注冊子項目的方法。參數如下：

appName: 子項目名稱
applicationOrLoadingFn: 子項目注冊函數，用戶需要返回 single-spa 的生命周期對象。后面我們會介紹single-spa的生命周期機制
activityFn: 回調函數入參location對象，可以寫自定義匹配路由加載規則。

singleSpa.start：這是啟動函數。

在項目中新建一個single-spa-config.js，并在main.js中引入

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( //注冊微前端服務
    '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(); // 啟動

二、創建一個子項目，命名為vue-child1

1.安裝single-spa-vue包

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

　　

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。