总结 vite + qiankun + vue3 遇到的坑

最新推荐文章于 2024-07-17 08:38:10 发布

爱来尔

最新推荐文章于 2024-07-17 08:38:10 发布

阅读量993

点赞数 1

文章标签： vue.js typescript 前端框架

本文链接：https://blog.csdn.net/qq_29615135/article/details/125117329

版权

本文档详细记录了使用 Vite、Qiankun 和 Vue3 构建微前端应用时遇到的问题及解决方案，包括主应用和子应用的配置、子应用如何调用主应用的功能、静态资源处理、npm-run-all 工具的使用，以及项目的运行和打包流程。

摘要由CSDN通过智能技术生成

总结 vite + qiankun + vue3 遇到的坑

github 地址：https://github.com/zhousihang/vite-qiankun-vue3
node 版本：16.15.0

一、主应用（main）

首先通过 npm init vite@latest 创建主应用，项目名 main，框架 vue + ts 。
在 main 项目安装 qiankun 。
```
npm install qiankun -S
```

在 main/src 文件下创建 qiankun 文件夹 index.ts 文件，这里放置微应用的注册信息。

	import {
      registerMicroApps, start } from 'qiankun'
	registerMicroApps([{
     
	    name: 'demo1',
	    entry: process.env.NODE_ENV === 'development' ? 'http://localhost:8081' : '/demo1/',
	    container: '#container',
	    activeRule: '/demo1'
	  },
	  {
     
	    name: 'demo2',
	    entry: process.env.NODE_ENV === 'development' ? 'http://localhost:8082' : '/demo2/',
	    container: '#container',
	    activeRule: '/demo2'
	  }
	])
	start()

在 main 项目 main.ts 引入微应用注册信息 (上面那文件)。
```
import './qiankun'
```
主应用这样就配置好了

二、子应用

同样通过 npm init vite@latest 创建主应用，项目名 demo1 以及 demo2，框架 vue + ts。
所有子应用配法一样 demo1 跟 demo2，这里统称子应用。

子应用不需要安装 qiankun，但需要安装 vite-plugin-qiankun，在 main.ts 以及 vite.config.ts 里引入。

main.ts（示例）：

// @ts-nocheck
import {
      App, createApp } from 'vue'
import {
      createRouter, createWebHistory } from 'vue-router'
import {
      renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/es/helper'
import app from './App.vue'
import routes from './router'

let root: App

// renders 生命周期函数
renderWithQiankun({
     
  mount (props: any) {
      render(props) },
  bootstrap (props: any) {
     },
  unmount () {
      root