开发环境读取配置文件路径修改VITE_BASE_URL = /xxx conf/plugins.js // 1. 引入乾坤import qiankun from 'vite-plugin-qiankun' // 2. composePlugins方法中添加qiankun('vue-child', {useDevMode: true}), 重点mainjs配置 参考 import { createApp } from 'vue'import App from './App.vue'import r...
a、vite设置 在vite.config.js中配置Qiankun插件 【非必须】方便固定端口,设置开发端口为4001 // E:\www\demo\qiankunDemo\micro2App\vite.config.tsimport qiankun from"vite-plugin-qiankun";// 添加项exportdefaultdefineConfig({plugins:[vue(),qiankun("micro2app",{useDevMode:true})// 添加项],reso...
说明: qiankun默认不支持vite项目作为子应用,需要借助 vite-qiankun 插件进行支持 1.配置vite-qiankun插件 npm i vite-plugin-qiankun -D vite.config.js import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import qiankun from...
5、vite.config.js 修改 importtype{UserConfig,ConfigEnv}from'vite'importpkgfrom'./package.json'importdayjsfrom'dayjs'import{loadEnv}from'vite'import{resolve}from'path'import{generateModifyVars}from'./build/generate/generateModifyVars'import{createProxy}from'./build/vite/proxy'import{wrapperEnv}from'...
安装乾坤插件(如果使用Vite构建,则安装vite-plugin-qiankun)。 在子应用的入口文件中,根据乾坤提供的API进行初始化操作。 配置子应用的生命周期钩子函数,如mount、bootstrap、update和unmount等。 3. “乾坤”在Vue3中的使用示例或代码片段 以下是一个简单的Vue3与乾坤集成的示例代码: 主应用(main.js 或 main.ts...
各类插件版本的不同,比如,node的版本,webpack的版本,vite的版本,node-sass/sass-loader的版本等 二、样式隔离 single-spa 没有做这部分的工作。一个大型的系统会有很的微应用组成,怎么保证这些微应用之间的样式互不影响?微应用和主应用之间的样式互不影响?这时只能通过约定命名规范来实现,比如应用样式以自己的应用...
通过vite构建4个应用,分别为: basic-vue-app–(vue3基座应用) micro-vue2-app–(vue2微应用) micro-vue3-app–(vue3微应用) micro-react-app–(react微应用) 打开我们的基座项目basic-vue-app 添加项目依赖,载入乾坤的包: npm install qiankun
解除VITE_GLOB_QIANKUN_MICRO_APP_ENTRY的注释,并且改为和乾坤主应用的子应用entry配置保持一致 # 作为乾坤子应用启动时必填,需与qiankun主应用注册子应用时填写的 entry 保持一致 VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//localhost:3100/jeecg-vue3 修改VITE_PUBLIC_PATH,改为和乾坤主应用的子应用activeRule配置保持...
比如说我,现在的项目用的是vue2+ElementUI,使用了乾坤微前端后,可视化大屏用的是vue3.2+TS+vite,然后还有一个页面用的是react Hooks+ts,这样一个项目我就用了三套技术栈,对于提升技术很有帮助 2.3.比如好不容易找到一个轮子,发现人家用的技术栈和自己的项目不一样时 ...
很多朋友要问了, 为什么子系统不用vite呢; 原因是主系统需要发请求到子系统的服务上拿页面的入口文件并执行; 而vite在dev时部分代码并没有被转码, 所以主应用拿到后直接执行会报错; 现在还没有什么优雅的解法, 所以子应用还是weboack吧; 仓库地址如下