集成乾坤微前端主应用：
1.安装
npm i qiankun -S
qiankun文档官方地址：https://qiankun.umijs.org/zh/guide
2.main.js中进行配置
import {registerMicroApps, start} from 'qiankun';
Vue.config.productionTip = false;
registerMicroApps([
{
name: 'test-web', // app name registered
entry: 'http://localhost:8081/', //项目地址
container: '#test-web',//加载组件的控件id
activeRule: '/test_web',
sanbox: true //解决css冲突
},
]);
//开启样式 主子应用样式隔离
start({sandbox: {experimentalStyleIsolation: true}});
3.配置路由
新建一个.vue文件文章来源：https://www.toymoban.com/news/detail-447774.html
<template>
//此处id与container保持一致
<div id="test-web"></div>
</template>
配置路由地址文章来源地址https://www.toymoban.com/news/detail-447774.html
{
path: '/test-web/*',
name: 'test-web',
component: () => import('@/views/test-web')
},
4.将主应用路由模式设置为history模式
子应用中配置（子应用无需安装乾坤）
1.在src目录下增加public-path.js文件
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2.在main.js中写入生命周期函数
//引入public-path.js
import "./public-path";
let instance = null;
function render(props = {}) {
const {container} = props;
console.log(11111111111111, window.__POWERED_BY_QIANKUN__, '字段值')
instance = new Vue({
router,
store,
render: h => h(App),
}).$mount(container ? container.querySelector('#app') : '#app', true); //开启沙箱
}
if (!window.__POWERED_BY_QIANKUN__) {
console.log('独立运行')
render();
}
function storeTest(props) {
props.onGlobalStateChange &&
props.onGlobalStateChange(
(value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
true,
);
props.setGlobalState &&
props.setGlobalState({
ignore: props.name,
user: {
name: props.name,
},
});
}
export async function bootstrap() {
console.log('111111111111 [vue] vue app bootstraped');
}
export async function mount(props) {
console.log('11111111111 [vue] props from main framework', props);
storeTest(props);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
}
3.在vue.config.js里面进行配置
const {name} = require('./package');
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
// 自定义webpack配置
configureWebpack: {
output: {
// 把子应用打包成 umd 库格式
library: `${name}-[name]`,
libraryTarget: 'umd',
//脚手架5.0 jsonpFunction 改为 chunkLoadingGlobal
jsonpFunction: `webpackJsonp_${name}`,
},
},
}
4.修改router配置
const routerConfig = {
base: window.__POWERED_BY_QIANKUN__ ? '/test-web/' : '/',
routes: []
}
5.检查package.json中的name是否与主应用中注册的name一致
6.重启子应用，进行跳转
到了这里，关于vue项目集成乾坤(qiankun)微前端的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
