vue+qiankun项目如何搭建

发布时间：2023-03-08 11:54:11 作者：iii
来源：亿速云阅读：255

Vue + Qiankun 项目如何搭建

引言
什么是微前端
Qiankun 简介
项目搭建前的准备工作
- 4.1 环境准备
- 4.2 项目结构规划
主应用搭建
子应用搭建
主应用与子应用的通信
- 7.1 使用全局状态管理
- 7.2 使用事件总线
部署与优化
- 8.1 项目部署
- 8.2 性能优化
常见问题与解决方案
总结

引言

随着前端应用的复杂度不断增加，传统的单体应用架构逐渐暴露出一些问题，如代码库庞大、团队协作困难、技术栈单一等。微前端架构应运而生，它将一个大型前端应用拆分为多个小型、独立的应用，每个应用可以由不同的团队开发、部署和维护。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 项目，并在实际项目中应用微前端架构。如果你在搭建过程中遇到任何问题，欢迎在评论区留言讨论。