// 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 router from './router'// pinia 仓库import { registerStore, useAppS...
1:在vue2项目src 下 撞见qiankun 文件夹 用于注册和启动子应用配置 创建index.js 创建app.js。注册。 name 要和子应用vite.config.js 配置相同。 container 要和 indexView 中id 相同 创建indexView.vue 。用于显示微应用容器 2:在应用main.js 中 引入配置 3: 在router.js 中配置子应用的路由。挂载在之前...
步骤3:创建微服务子应用在项目中创建一个新的文件夹,用于存放微服务的代码。例如,可以创建一个名为“microservice”的文件夹。在文件夹中创建一个新的Vue组件,作为微服务的入口点。例如,可以创建一个名为“MicroserviceEntry.vue”的文件。步骤4:配置Qiankun在主应用中引入Qiankun,并在Vue Router中配置微服务的路由。
const qiankun = createQiankun({ name: 'main', //主应用的名称 entry: '/', //主应用的入口路径 container: 'app', //主应用的挂载容器 hot: true, //启用热更新 }); ``` 3.在子应用中配置`qiankun`: ```javascript export default { name: 'child', //子应用的名称 entry: '/child', ...
Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun,通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势 修改Vite.config.js 2. 修改子应用的main.ts,将生命周期mount、bootstrap、unmount等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同 ...
配置vite.config.ts import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importqiankunfrom'vite-plugin-qiankun'importpathfrom'path'//! useDevMode = true 时不开启热更新constuseDevMode=true;// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),qiankun('micro-org',...
主应用basic-vue-app(vue3+vite) 安装qiankun 代码语言:javascript 复制 npm install qiankun 新建src/qiankun/index.js文件,进行单独的抽离 代码语言:javascript 复制 import { registerMicroApps, start } from 'qiankun' registerMicroApps([ { name: 'vue-app', // 必须与微应用注册名字相同 entry: 'http...
build: { // 如果是 qiankun 子应用,可能需要以下配置 lib: { entry: 'path/to/your/entry.js', // 指向你的入口文件 name: 'YourAppName', // 打包后的库名 formats: ['umd'] // 使用 umd 格式以便 qiankun 加载 // ... 其他 lib 配置项 ... }, rollupOptions: { // 确保外部化那些不...
1.安装依赖:在vite项目根目录下执行命令`npm install qiankun`安装qiankun依赖。 2.配置微应用:在vite项目中创建一个新的文件,如`sub-app.js`,用于配置微应用。在该文件中,需要导出一个微应用实例,可通过`initGlobalState`方法来创建一个全局状态管理对象,并配置微应用的基本信息,如路由、静态资源地址等。 3....