微前端实战指南：跨框架架构下的Vue3应用集成

将 Vue3 + Webpack 子应用集成到 Vue3 + Vite 主应用：微前端之旅

简介

微前端架构的兴起为构建灵活且可维护的应用程序带来了新的机遇。它允许开发人员将单一应用程序分解为多个较小的、独立部署的模块或“子应用”。在本博客中，我们将探讨如何将一个基于 Vue3 和 Webpack 的子应用集成到一个基于 Vue3 和 Vite 的主应用中，开启你的微前端探索之旅。

先决条件

在开始之前，确保你已经满足以下先决条件：

• 安装了 Node.js 和 npm
• 安装了 Vue CLI
• 安装了 Vite
• 安装了微前端框架 Qiankun

创建主应用

第一步是使用 Vue CLI 创建一个 Vue3 + Vite 主应用：

vue create main-app --preset vite

创建子应用

接下来，使用 Vue CLI 创建一个 Vue3 + Webpack 子应用：

vue create sub-app --preset webpack

配置主应用

在主应用中，安装 Qiankun 和子应用：

npm install --save qiankun @sub-app/vue

然后，在 main.js 中配置 Qiankun：

import { createApp } from 'vue'
import Qiankun from 'qiankun'
import SubApp from '@sub-app/vue'

const app = createApp(SubApp)

app.use(Qiankun, {
  apps: [
    {
      name: 'sub-app',
      entry: '//localhost:3001',
      container: '#sub-app-container'
    }
  ],
  // 其他配置项...
})

app.mount('#app')

配置子应用

在子应用中，需要配置 Webpack 以支持微前端：

// webpack.config.js
module.exports = {
  // ...其他配置项...
  output: {
    // 将子应用打包成umd模块
    library: 'sub-app',
    libraryTarget: 'umd',
    publicPath: '//localhost:3001/'
  }
}

运行应用

现在，你可以运行主应用和子应用：

# 主应用
npm run serve

# 子应用
npm run build && npm run serve

验证集成

打开主应用，你应该可以看到子应用被集成在其中。

常见问题

1. 子应用无法加载

• 检查子应用的打包配置是否正确。
• 检查子应用的 publicPath 是否正确。
• 检查主应用中的 Qiankun 配置是否正确。

2. 子应用与主应用之间无法通信

• 检查子应用和主应用的通信协议是否一致。
• 检查子应用和主应用的通信通道是否正确。

结论

通过本教程，你已经掌握了将 Vue3 + Webpack 子应用集成到 Vue3 + Vite 主应用中的方法。微前端架构为构建现代、可扩展且维护方便的应用程序提供了强大的解决方案。随着微前端领域的不断发展，期待未来出现更多创新的技术和最佳实践。