当前位置：首页 > news >正文

qiankun微前端

news 来源：原创 2024/9/20 15:24:02

qiankun微前端

主项目
- 1、安装qiankun
- 2、main.js引入注册
二、子项目
- 1、安装@sh-winter/vite-plugin-qiankun
- 2、main.js配置
- 3、vite.config.js配置
三、问题解决
四、一键启动

主项目

1、安装qiankun

npm i qiankun -S

2、main.js引入注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')//引入
import { registerMicroApps, start } from 'qiankun';
// 注册微应用
registerMicroApps([{name: 'app_one',           //子项目名称entry: '//localhost:5173', // 子项目地址container: '#app_one',  // 在主项目中配置子项目将要显示的位置节点activeRule: '/',       //激活规则，可以通过设置不同的路由进行激活props: {} //传参       //子项目 主项目传参的通道}]);// 启动 qiankunstart({prefetch:'all' // 预加载});

二、子项目

1、安装@sh-winter/vite-plugin-qiankun

npm i @sh-winter/vite-plugin-qiankun

2、main.js配置

Vue3.x

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'import { exportLifeCycleHooks, qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'
function render() {const app = createApp(App)app.mount('#app1') //此处的id和html中一致，最好不要与主项目的一致，以免冲突
}
exportLifeCycleHooks({bootstrap() {// do nothing.},mount(props) {render(props.container);},unmount() {app?.unmount();}
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {render();
}

3、vite.config.js配置

Vue3.x

import {qiankunPlugin, transformAssetUrl } from '@sh-winter/vite-plugin-qiankun'
import { name as packageName } from './package.json'
export default defineConfig({base: `/${packageName}/`,plugins: [vue({template: {compilerOptions: {nodeTransforms: [transformAssetUrl]}}}),qiankunPlugin({ packageName })],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},})

三、问题解决

1、可能出现报错信息：
在这里插入图片描述
问题分析：一般实在网络较慢的时候出现，意思就是还没有加载好没法显示
问题解决：使用v-if绑定子项目显示的位置，在mounted后进行显示即可

四、一键启动

在两个项目同级目录执行npm init -y，并创建index.js文件
在这里插入图片描述
1、package.json配置：

{"name": "qiankun","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev":"node ./index.js" //在根目录执行npm run dev走这里，去执行index.js文件中的方法},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"child_process": "^1.0.2"}
}

2、index.js文件内容

const childProcess = require('child_process')
const path = require('path')
// 配置每个应用的路径
const filePath = {'app_one': path.join(__dirname, './app_one'),main: path.join(__dirname, './vue-project')
}// cd 子应用的目录 npm run dev 启动项目
function runChild () {Object.values(filePath).forEach(item => {//配置项目启动命令childProcess.spawn(`cd ${item} && npm run dev`, { stdio: "inherit", shell: true })})
}
runChild()