qiankun微前端
主项目
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: {} //传参 //子项目 主项目传参的通道
}
]);
// 启动 qiankun
start({
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()
启动成功:
最终效果