vue3乾坤使用（1）------乾坤的基本使用

diang
541 阅读3分钟

在 Vue 3 项目中使用 乾坤（qiankun）  微前端框架，可以将多个独立的前端应用集成到一个主应用中，实现微前端架构。以下是详细的使用步骤和注意事项。

1. 什么是乾坤（qiankun）？

乾坤是一个基于 Single-SPA 的微前端解决方案，支持将多个独立的前端应用（如 Vue、React、Angular 等）集成到一个主应用中，实现应用的解耦和独立开发、部署。

2. 使用步骤

2.1 安装乾坤

在主应用和子应用中安装乾坤依赖：

npm install qiankun -S

2.2 配置主应用

主应用负责加载和管理子应用。

  • 在主应用中注册子应用：

    // main.js (主应用)
import { registerMicroApps, start } from 'qiankun'

// 注册子应用
registerMicroApps([
  {
    name: 'vue3-app', // 子应用名称
    entry: '//localhost:8081', // 子应用入口（开发环境为本地服务，生产环境为线上地址）
    container: '#subapp-container', // 子应用挂载的容器
    activeRule: '/vue3', // 子应用的路由前缀
  },
  {
    name: 'react-app',
    entry: '//localhost:8082',
    container: '#subapp-container',
    activeRule: '/react',
  }
])

// 启动乾坤
start()

  • 在主应用的模板中添加子应用容器：

    <!-- App.vue -->
<template>
  <div id="app">
    <h1>主应用</h1>
    <div id="subapp-container"></div> <!-- 子应用挂载点 -->
  </div>
</template>

  • 配置主应用的路由：
    确保主应用的路由不会与子应用的路由冲突。

    // router.js (主应用)
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

2.3 配置子应用

子应用需要暴露生命周期钩子，以便主应用加载。

  • 在子应用中导出生命周期钩子：

    // main.js (子应用)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

let instance = null

function render(props = {}) {
  const { container } = props
  instance = createApp(App)
  instance.use(router)
  instance.mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时，直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 导出生命周期钩子
export async function bootstrap() {
  console.log('子应用启动')
}

export async function mount(props) {
  console.log('子应用挂载')
  render(props)
}

export async function unmount() {
  console.log('子应用卸载')
  instance.unmount()
  instance = null
}

  • 配置子应用的打包工具：
    修改子应用的 vue.config.js，使其支持乾坤：

    // vue.config.js (子应用)
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8081, // 确保端口与主应用配置一致
    headers: {
      'Access-Control-Allow-Origin': '*' // 允许跨域
    }
  },
  configureWebpack: {
    output: {
      library: 'vue3-app', // 子应用名称
      libraryTarget: 'umd', // 将子应用打包为 umd 格式
    }
  }
})

2.4 运行项目

  1. 启动主应用和子应用：

    • 主应用运行在 localhost:8080
    • Vue 3 子应用运行在 localhost:8081
    • React 子应用运行在 localhost:8082

  2. 访问主应用的路由：

    • /vue3 加载 Vue 3 子应用
    • /react 加载 React 子应用

3. 注意事项

  1. 路由冲突：

    • 主应用和子应用的路由前缀需要明确区分，避免冲突。
    • 子应用的路由需要基于主应用的路由前缀。

  2. 样式隔离：

    • 使用 scoped 样式或 CSS Modules 避免样式污染。
    • 乾坤默认支持 JS 沙箱，但不支持 CSS 隔离，可以通过 shadow DOM 或手动处理样式。

  3. 通信机制：

    • 使用 props 传递数据。
    • 使用全局状态管理工具（如 Vuex、Pinia）或自定义事件通信。

  4. 生产环境部署：

    • 子应用的 entry 需要替换为生产环境的 CDN 地址。
    • 确保主应用和子应用的跨域问题已解决。

4. 示例代码

总结

通过乾坤，可以轻松实现 Vue 3 的微前端架构，将多个独立应用集成到一个主应用中。核心步骤包括：

  1. 在主应用中注册子应用。
  2. 在子应用中导出生命周期钩子。
  3. 配置路由和打包工具，确保主应用和子应用协同工作。

这种方法适用于大型项目，能够有效提升开发效率和可维护性。

avatar
文章
阅读
粉丝