vue+qiankun項目如何搭建

Vue + Qiankun 項目如何搭建

目錄

1. 引言
2. 什么是微前端
3. Qiankun 簡介
4. 項目搭建前的準備工作
   • 4.1 環境準備
   • 4.2 項目結構規劃
5. 主應用搭建
   • 5.1 創建主應用
   • 5.2 安裝 Qiankun
   • 5.3 配置主應用
6. 子應用搭建
   • 6.1 創建子應用
   • 6.2 配置子應用
   • 6.3 子應用的獨立運行
7. 主應用與子應用的通信
   • 7.1 使用全局狀態管理
   • 7.2 使用事件總線
8. 部署與優化
   • 8.1 項目部署
   • 8.2 性能優化
9. 常見問題與解決方案
10. 總結

引言

隨著前端應用的復雜度不斷增加，傳統的單體應用架構逐漸暴露出一些問題，如代碼庫龐大、團隊協作困難、技術棧單一等。微前端架構應運而生，它將一個大型前端應用拆分為多個小型、獨立的應用，每個應用可以由不同的團隊開發、部署和維護。Qiankun 是一個基于 Single-SPA 的微前端解決方案，它能夠幫助開發者輕松實現微前端架構。

本文將詳細介紹如何使用 Vue 和 Qiankun 搭建一個微前端項目，涵蓋從項目創建、配置到部署的完整流程。

什么是微前端

微前端是一種將前端應用拆分為多個小型、獨立的應用的架構模式。每個微前端應用可以獨立開發、測試、部署和運行，最終通過某種方式組合在一起，形成一個完整的前端應用。

微前端的主要優點包括：

• 技術棧無關：每個微前端應用可以使用不同的技術棧，如 Vue、React、Angular 等。
• 獨立開發與部署：每個微前端應用可以由不同的團隊獨立開發和部署，提高開發效率。
• 漸進式升級：可以逐步將單體應用遷移到微前端架構，降低遷移風險。

Qiankun 簡介

Qiankun 是一個基于 Single-SPA 的微前端解決方案，它提供了以下核心功能：

• 應用注冊與加載：Qiankun 可以動態注冊和加載微前端應用。
• 樣式隔離：Qiankun 提供了樣式隔離機制，避免不同微前端應用之間的樣式沖突。
• JS 沙箱：Qiankun 提供了 JS 沙箱機制，確保不同微前端應用之間的 JavaScript 執行環境隔離。
• 通信機制：Qiankun 提供了全局狀態管理和事件總線等通信機制，方便主應用與子應用之間的通信。

項目搭建前的準備工作

4.1 環境準備

在開始搭建項目之前，確保你的開發環境已經安裝了以下工具：

• Node.js：建議使用 LTS 版本。
• npm 或 yarn：用于管理項目依賴。
• Vue CLI：用于創建 Vue 項目。

4.2 項目結構規劃

在搭建微前端項目時，通常會將項目分為主應用和多個子應用。主應用負責加載和管理子應用，子應用則是獨立的 Vue 項目。

一個典型的結構如下：

project/
├── main-app/          # 主應用
├── sub-app-1/         # 子應用1
├── sub-app-2/         # 子應用2
└── sub-app-3/         # 子應用3

主應用搭建

5.1 創建主應用

首先，使用 Vue CLI 創建一個新的 Vue 項目作為主應用：

vue create main-app

在創建過程中，選擇默認配置或根據需要進行自定義配置。

5.2 安裝 Qiankun

在主應用中安裝 Qiankun：

cd main-app
npm install qiankun

5.3 配置主應用

在主應用中，我們需要配置 Qiankun 來加載和管理子應用。首先，在 src/main.js 中引入 Qiankun：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'sub-app-1', // 子應用名稱
    entry: '//localhost:8081', // 子應用入口
    container: '#sub-app-container', // 子應用掛載的容器
    activeRule: '/sub-app-1', // 子應用激活規則
  },
  {
    name: 'sub-app-2',
    entry: '//localhost:8082',
    container: '#sub-app-container',
    activeRule: '/sub-app-2',
  },
]);

start();

接下來，在 src/App.vue 中添加一個容器用于掛載子應用：

<template>
  <div id="app">
    <h1>主應用</h1>
    <div id="sub-app-container"></div>
  </div>
</template>

子應用搭建

6.1 創建子應用

使用 Vue CLI 創建一個新的 Vue 項目作為子應用：

vue create sub-app-1

在創建過程中，選擇默認配置或根據需要進行自定義配置。

6.2 配置子應用

在子應用中，我們需要配置 Qiankun 以使其能夠被主應用加載。首先，在 src/main.js 中導出 Qiankun 的生命周期鉤子：

import Vue from 'vue';
import App from './App.vue';

let instance = null;

function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 獨立運行時
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[sub-app-1] bootstrap');
}

export async function mount(props) {
  console.log('[sub-app-1] mount', props);
  render(props);
}

export async function unmount() {
  console.log('[sub-app-1] unmount');
  instance.$destroy();
  instance = null;
}

接下來，在 vue.config.js 中配置子應用的打包輸出：

const { name } = require('./package');

module.exports = {
  devServer: {
    port: 8081, // 子應用端口
    headers: {
      'Access-Control-Allow-Origin': '*', // 允許跨域
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 將子應用打包成 umd 庫格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

6.3 子應用的獨立運行

子應用既可以作為微前端應用被主應用加載，也可以獨立運行。在獨立運行時，子應用的入口文件 src/main.js 會直接調用 render() 函數，渲染子應用。

主應用與子應用的通信

7.1 使用全局狀態管理

Qiankun 提供了 initGlobalState 方法，用于在主應用和子應用之間共享全局狀態。首先，在主應用中初始化全局狀態：

import { initGlobalState } from 'qiankun';

const initialState = {
  user: {
    name: 'John Doe',
  },
};

const actions = initGlobalState(initialState);

actions.onGlobalStateChange((state, prev) => {
  console.log('主應用: 全局狀態變化', state, prev);
});

actions.setGlobalState({
  user: {
    name: 'Jane Doe',
  },
});

在子應用中，可以通過 props 獲取全局狀態：

export async function mount(props) {
  console.log('[sub-app-1] mount', props);
  props.onGlobalStateChange((state, prev) => {
    console.log('子應用: 全局狀態變化', state, prev);
  });
  props.setGlobalState({
    user: {
      name: 'Jane Doe',
    },
  });
  render(props);
}

7.2 使用事件總線

除了全局狀態管理，還可以使用事件總線進行主應用與子應用之間的通信。首先，在主應用中創建一個事件總線：

import Vue from 'vue';

export const eventBus = new Vue();

在子應用中，可以通過 props 獲取事件總線并監聽事件：

export async function mount(props) {
  console.log('[sub-app-1] mount', props);
  props.eventBus.$on('custom-event', (payload) => {
    console.log('子應用: 收到事件', payload);
  });
  render(props);
}

在主應用中，可以通過事件總線觸發事件：

eventBus.$emit('custom-event', { message: 'Hello from main app' });

部署與優化

8.1 項目部署

在部署微前端項目時，主應用和子應用可以分別部署在不同的服務器上，也可以部署在同一個服務器上。如果部署在同一個服務器上，可以通過 Nginx 配置反向代理，將不同的子應用路由到不同的端口。

例如，Nginx 配置如下：

server {
  listen 80;
  server_name example.com;

  location / {
    proxy_pass http://localhost:8080; # 主應用
  }

  location /sub-app-1 {
    proxy_pass http://localhost:8081; # 子應用1
  }

  location /sub-app-2 {
    proxy_pass http://localhost:8082; # 子應用2
  }
}

8.2 性能優化

微前端項目的性能優化可以從以下幾個方面入手：

• 按需加載：Qiankun 支持按需加載子應用，只有在用戶訪問子應用時才會加載相應的資源。
• 代碼分割：使用 Webpack 的代碼分割功能，將子應用的代碼拆分為多個 chunk，減少首次加載時的資源體積。
• 緩存策略：合理配置 HTTP 緩存策略，減少重復加載資源的次數。

常見問題與解決方案

9.1 子應用樣式沖突

Qiankun 提供了樣式隔離機制，但在某些情況下仍可能出現樣式沖突?？梢酝ㄟ^以下方式解決：

• 使用 CSS Modules：在子應用中使用 CSS Modules，確保樣式作用域僅限于當前組件。
• 使用 Shadow DOM：在子應用中使用 Shadow DOM，徹底隔離樣式。

9.2 子應用加載失敗

如果子應用加載失敗，可能是以下原因導致的：

• 子應用入口地址錯誤：檢查子應用的 entry 配置是否正確。
• 跨域問題：確保子應用的服務器配置了正確的 CORS 頭。

9.3 主應用與子應用通信失敗

如果主應用與子應用通信失敗，可能是以下原因導致的：

• 全局狀態未初始化：確保在主應用中正確初始化了全局狀態。
• 事件總線未傳遞：確保在主應用中正確傳遞了事件總線。

總結

本文詳細介紹了如何使用 Vue 和 Qiankun 搭建一個微前端項目，涵蓋了從項目創建、配置到部署的完整流程。通過微前端架構，我們可以將一個大型前端應用拆分為多個小型、獨立的應用，提高開發效率和可維護性。Qiankun 提供了豐富的功能和靈活的配置，使得微前端架構的實現變得更加簡單和高效。

希望本文能夠幫助你順利搭建 Vue + Qiankun 項目，并在實際項目中應用微前端架構。如果你在搭建過程中遇到任何問題，歡迎在評論區留言討論。