qiankun：vite/webpack项目配置

2024-03-14 23:12
文章标签 配置 项目 vite webpack qiankun

本文主要是介绍qiankun：vite/webpack项目配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

相关博文：
https://juejin.cn/post/7216536069285429285?searchId=202403091501088BACFF113F980BA3B5F3

https://www.bilibili.com/video/BV12T411q7dq/?spm_id_from=333.337.search-card.all.click

qiankun结构：

主应用base：vue3+history+vite
子应用sub-react：react+history+webpack
子应用sub-vue：vue3+history+vite
子应用sub-vue2：vue2+base+webpack
在这里插入图片描述



❀ 主应用base

1、安装qiankun

yarn add qiankun # 或者 npm i qiankun -S

2、存放子应用信息

/src/utils/qiankun-config.js

export default {subApps: [{name: 'sub-react', // 子应用名称，跟package.json一致entry: process.env.NODE_ENV === 'development'? '//localhost:3101': '//react.qk.com', // 子应用入口，本地环境下指定端口container: '#sub-app', // 挂载子应用的domactiveRule: '/sub-react', // 路由匹配规则props: {} // 主应用与子应用通信传值},{name: 'sub-vue',entry: process.env.NODE_ENV === 'development'? '//localhost:3100': '//vue3.qk.com',container: '#sub-app',activeRule: '/sub-vue',props: {}},{name: 'sub-vue2',entry: process.env.NODE_ENV === 'development'? '//localhost:3103': '//vue2.qk.com',container: '#sub-app',activeRule: '/sub-vue2',props: {}}]}

3、开启qiankun

/src/utils/qiankun

import { registerMicroApps, initGlobalState } from 'qiankun'
import config from './qiankun-config'const { subApps } = configexport function registerApps() {try {registerMicroApps(subApps, {beforeLoad: [app => {console.log('before load', app)return Promise.resolve()}],beforeMount: [app => {console.log('before mount', app)return Promise.resolve()}],afterUnmount: [app => {console.log('before unmount', app)return Promise.resolve()}]})const actions = initGlobalState(state);// 主项目项目监听和修改actions.onGlobalStateChange((state, prev) => {// state: 变更后的状态; prev 变更前的状态console.log('主项目项目监听变化:',state, prev);});actions.setGlobalState(state);} catch (err) {console.log('qiankunError',err)}
}

4、新建一个组件，用于加载子应用

/src/page/container.vue

<template><div id="sub-app"></div>
</template><script lang="ts">
import { start } from 'qiankun'
import { registerApps } from '@/utils/qiankun'export default {mounted() {if (!window.__POWERED_BY_QIANKUN__) {window.qiankunStarted = trueregisterApps();start({sandbox: {experimentalStyleIsolation: true // 样式隔离}})}else{window.__POWERED_BY_QIANKUN__.on('mount', loadMicroApps);  如果一个页面同时展示多个微应用，需要使用 loadMicroApp 来加载。}}}
</script>

5、配置路由

export const router = createRouter({history: createWebHistory(),routes: [{path: '/',redirect: '/home',meta: {show: false}},{path: '/home',name: 'home',meta: {cnName: '首页',show: true},component: () => import('@/page/home.vue')},{path: '/about',name: 'about',meta: {cnName: '关于',show: true,keepAlive: true},component: () => import('@/page/about.vue')},{path: '/news/:id/:title/:content',name: 'news',meta: {cnName: '新闻',show: true},component: () => import('@/page/news.vue')},{path: '/communication',name: 'communication',meta: {cnName: '练习',show: true},component: () => import('@/page/communication.vue')},{// history模式需要通配所有路由，详见vue-router文档path: '/sub-react/:pathMatch(.*)*',name: 'sub-react',meta: {path:'/sub-react', // 注意：meta里的这个path是用来供router-link使用的，不用上面的path是因为点击主应用菜单跳转到子应用的时候默认带上了通配符cnName: 'sub-react',show: true,key: 'sub-react',},component: () => import('@/page/container.vue'),},{// history模式需要通配所有路由，详见vue-router文档path: '/sub-vue/:pathMatch(.*)*',name: 'sub-vue',meta: {path:'/sub-vue',cnName: 'sub-vue',show: true,key: 'sub-vue',},component: () => import('@/page/container.vue'),},{path: '/sub-vue2',name: 'sub-vue2',meta: {path:'/sub-vue2/', // 如果不加上最后的“/”，则域名会变成：http://localhost:8080/sub-vue2#/logincnName: 'sub-vue2',show: true,key: 'sub-vue2',},component: () => import('@/page/container.vue'),}]
})

*注意：meta里的这个path是用来供router-link使用的，不用上面的path是因为点击主应用菜单跳转到子应用的时候默认带上了通配符
在这里插入图片描述

6、首页 src/App.vue 放置 router-view

<template><header><router-linkv-for="item in routes":key="item.path":to="item.meta.path ? item.meta.path : item.path"><span>{{ item.meta?.cnName }}</span></router-link><router-view v-slot="{Component}" v-show="!$route.meta.key"><keep-alive><component :is="Component" v-if="$route.meta.keepAlive" /></keep-alive><component :is="Component" v-if="!$route.meta.keepAlive" /></router-view></header>
</template>


❀ vite子应用配置（sub-vue）

一、安装vite-plugin-qiankun（vue项目才需要安装）

npm i vite-plugin-qiankun --save-dev

二、修改vite.config.js

sub-vue 修改vite.config.js

export default defineConfig({// base: '/sub-vue',plugins: [vue(),vueJsx(),qiankun('sub-vue', {   // 配置qiankun插件useDevMode: true}),],server: {host: 'localhost',port: 3100,origin: 'http://localhost:3100/',headers: {'Access-Control-Allow-Origin': '*'}}
})


❀ webpack子应用配置（sub-react、sub-vue2）

一、修改webpack配置文件

sub-react

// 在根目录下新增config-overrides.js文件并新增如下配置
const { name } = require("./package");module.exports = {webpack: (config) => {config.output.library = `sub-react`;config.output.libraryTarget = "umd";config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;return config;},devServer: (_) => {const config = _;// config.publicPath = "http://loaclhost:3101";config.headers = {'Access-Control-Allow-Origin': '*',};return config;},
};

sub-vue2

const { name } = require('./package.json')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,configureWebpack: {output: {library: `sub-vue2`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式// jsonpFunction: `webpackJsonp_${name}`,  // webpack5没有jsonpFunction这个optionschunkLoadingGlobal: `webpackJsonp_${name}`},},devServer:{host: 'localhost',port: 3103,headers: {'Access-Control-Allow-Origin': '*',}}
})

二、配置public-path（解决子应用图片默认取主应用的路径）

sub-react、sub-vue2 src文件下添加public-path.js

if (window.__POWERED_BY_QIANKUN__) {// eslint-disable-next-line no-undef__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

并在入口文件的第一行！！！引入它
sub-react——src——index.js
在这里插入图片描述
sub-vue2——src——main.js
在这里插入图片描述

❀ history路由入口规则（sub-vue、sub-react）

sub-vue

import { createRouter, createWebHistory } from 'vue-router'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'const routes = [{path: '/',redirect: { name: 'List' },meta: { title: '首页' },children: [{path: '/list',name: 'List',component: () => import('../views/List.vue')},{path: '/detail',name: 'Detail',component: () => import('../views/Detail.vue')}]},
]const router = createRouter({history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/sub-vue/' : '/'),routes
})export default router

sub-react好像不需要配置，直接在App.js添加router和link

<div className='menu'><Link to={'/'}>list</Link><Link to={'/detail'}>detail</Link><a onClick={goVue}>vue列表页</a>
</div>
<Routes><Route path='/' element={<List />} /><Route path='/detail' element={<Detail />} />
</Routes>

❀ 配置生命周期（所有子组件）

sub-react——src——index.js

import './public-path.js'   // public-path处理子应用里的图片地址默认取主应用的路径
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';import App from './App';
import { BrowserRouter } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';let root;
// 将render方法用函数包裹，供后续主应用与独立运行调用
function render(props) {const { container } = propsconst dom = container ? container.querySelector('#root') : document.getElementById('root')root = createRoot(dom)if(!container){root.render(<BrowserRouter><App/></BrowserRouter>)return}root.render(<BrowserRouter basename='/sub-react'>   // 设置路由base<App/></BrowserRouter>)
}// 判断是否在qiankun环境下，非qiankun环境下独立运行
if (!window.__POWERED_BY_QIANKUN__) {render({});
}// 各个生命周期
// bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
export async function bootstrap() {console.log('react app bootstraped');
}// 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
export async function mount(props) {render(props);
}// 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
export async function unmount(props) {root.unmount();
}// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

sub-vue——src——main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {renderWithQiankun,qiankunWindow
} from 'vite-plugin-qiankun/dist/helper'let app:anyconst render = (container) => {app = createApp(App)app.use(router).mount(container ? container.querySelector('#app') : '#app')
}const initQianKun = () => {renderWithQiankun({mount(props) {const { container } = propsrender(container)},bootstrap() {},unmount() {app.unmount()}})
}qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()

sub-vue2——src——main.js

import './public-path'
import Vue from 'vue'
import App from './App.vue'
import router from './router';Vue.config.productionTip = falselet instance = nullfunction render(props = {}) {const { container } = propsinstance = new Vue({router,render: h => h(App)}).$mount(container ? container.querySelector('#app') : '#app')
}if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log(' vue2 app bootstraped')
}
export async function mount(props) {console.log(' props from main framework', props);render(props)
}
export async function unmount() {instance.$destroy()instance.$el.innerHTML = ''instance = null
}

❀ 踩坑点：

子应用切换时出现以下警告：（我没遇到）
在这里插入图片描述
主应用增加：

router.beforeEach((to, from, next) => {if (!window.history.state.current) window.history.state.current = to.fullPathif (!window.history.state.back) window.history.state.back = from.fullPath// 手动修改history的statereturn next()
})

这篇关于qiankun：vite/webpack项目配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/810021。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
golang内存对齐的项目实践

golang内存对齐的项目实践

《golang内存对齐的项目实践》本文主要介绍了golang内存对齐的项目实践,内存对齐不仅有助于提高内存访问效率,还确保了与硬件接口的兼容性,是Go语言编程中不可忽视的重要优化手段,下面就来介绍一下... 目录一、结构体中的字段顺序与内存对齐二、内存对齐的原理与规则三、调整结构体字段顺序优化内存对齐四、内
阅读更多...
SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤

SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤

《SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤》本文主要介绍了SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤,文中通过示例代码介绍的非常详... 目录 目标 步骤 1：确保 ProxySQL 和 mysql 主从同步已正确配置ProxySQL 的
阅读更多...
Spring Boot整合log4j2日志配置的详细教程

Spring Boot整合log4j2日志配置的详细教程

《SpringBoot整合log4j2日志配置的详细教程》：本文主要介绍SpringBoot项目中整合Log4j2日志框架的步骤和配置,包括常用日志框架的比较、配置参数介绍、Log4j2配置详解... 目录前言一、常用日志框架二、配置参数介绍1. 日志级别2. 输出形式3. 日志格式3.1 PatternL
阅读更多...
配置springboot项目动静分离打包分离lib方式

配置springboot项目动静分离打包分离lib方式

《配置springboot项目动静分离打包分离lib方式》本文介绍了如何将SpringBoot工程中的静态资源和配置文件分离出来,以减少jar包大小,方便修改配置文件,通过在jar包同级目录创建co... 目录前言1、分离配置文件原理2、pom文件配置3、使用package命令打包4、总结前言默认情况下，
阅读更多...
python实现简易SSL的项目实践

python实现简易SSL的项目实践

《python实现简易SSL的项目实践》本文主要介绍了python实现简易SSL的项目实践,包括CA.py、server.py和client.py三个模块,文中通过示例代码介绍的非常详细,对大家的学习... 目录运行环境运行前准备程序实现与流程说明运行截图代码CA.pyclient.pyserver.py参
阅读更多...
IDEA运行spring项目时,控制台未出现的解决方案

IDEA运行spring项目时,控制台未出现的解决方案

《IDEA运行spring项目时,控制台未出现的解决方案》文章总结了在使用IDEA运行代码时,控制台未出现的问题和解决方案,问题可能是由于点击图标或重启IDEA后控制台仍未显示,解决方案提供了解决方法... 目录问题分析解决方案总结问题js使用IDEA，点击运行按钮，运行结束，但控制台未出现http://
阅读更多...
解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类，编译时
阅读更多...
VScode连接远程Linux服务器环境配置图文教程

VScode连接远程Linux服务器环境配置图文教程

《VScode连接远程Linux服务器环境配置图文教程》：本文主要介绍如何安装和配置VSCode,包括安装步骤、环境配置（如汉化包、远程SSH连接）、语言包安装（如C/C++插件）等,文中给出了详... 目录一、安装vscode二、环境配置1.中文汉化包2.安装remote-ssh，用于远程连接2.1安装2
阅读更多...
C语言小项目实战之通讯录功能

C语言小项目实战之通讯录功能

《C语言小项目实战之通讯录功能》：本文主要介绍如何设计和实现一个简单的通讯录管理系统,包括联系人信息的存储、增加、删除、查找、修改和排序等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录功能介绍：添加联系人模块显示联系人模块删除联系人模块查找联系人模块修改联系人模块排序联系人模块源代码如下
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2