微前端qiankun 使用，一些注意事项。附上qiankun官网
主应用(vue)
1、安装qiankun
npm install qiankun
2、修改 main.js
// 导入qiankun.js
import {registerMicroApps,setDefaultMountApp,start} from "qiankun";
// 注册子应用
registerMicroApps([
{
name: 'vue app', // 子应用名称
entry: '//localhost:7101/', // 子应用入口
container: '#vue', // 子应用所在容器
activeRule: '/app/vue', // 子应用触发规则（路径）
},
{
name: 'react app', // 子应用名称
entry: '//localhost:3000/', // 子应用入口
container: '#react', // 子应用所在容器
activeRule: '/app/react', // 子应用触发规则（路径）
},
]);
// 启动默认应用
setDefaultMountApp('/')
// 开启服务,配置项见官方文档
start()
主应用到这就可以了，下面的是一些扩展加载微应用事项
3、router页面配置加载微应用
修改主应用router.js
{
path: '/app/*',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
在About.vue文件中加入
import { start } from 'qiankun';
export default {
name: 'About',
props: {
msg: String
},
mounted() {
if (!window.qiankunStarted) {
window.qiankunStarted = true;
start();
}
},
}
4、如果在vue-admin模板中使用乾坤，需要注意的是：
路由需要配置重定向
{
path: '/appvue/*',
name: 'app',
meta: { title: 'app', icon: 'tree' },
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/app/app.vue')
},
判断改变路由（这里可写配置文件，偷懒就写死了）
if (to.indexOf('/appvue/*') > -1) {
return {
to: '/app/vue'
}
}
if (to.indexOf('/appreact/*') > -1) {
return {
to: '/app/react'
}
}
AppMain.vue,需要判断显示的是哪个微应用，改变其id显示
container() {
if (this.$route.path === '/app/vue') {
return 'vue'
}
if (this.$route.path === '/app/react') {
return 'react'
}
},
微应用（vue）
1、在 src 目录新增 public-path.js：
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2、 main.js 修改。
import './public-path'
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import routes from './router';
import store from './store'
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
Vue.config.productionTip = false
let router = null;
let instance = null;
function render(props = {}) {
const { container } = props;
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/app/vue/' : '/',
mode: 'history',
routes,
});
instance = new Vue({
router,
store,
render: h => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
router = null;
}
3、打包配置修改（vue.config.js）：
const path = require('path');
const { name } = require('./package');
function resolve(dir) {
return path.join(__dirname, dir);
}
const port = 7101; // dev port
module.exports = {
devServer: {
// host: '0.0.0.0',
hot: true,
disableHostCheck: true,
port,
overlay: {
warnings: false,
errors: true,
},
// 跨域
headers: {
'Access-Control-Allow-Origin': '*',
},
},
// webpack配置
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
output: {
// 把子应用打包成 umd 库格式(必须)
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
},
},
};
微应用（react）
1、在 src 目录新增 public-path.js：
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2、设置 history 模式路由的 base：
3、 index.js 修改
import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
function render(props) {
const { container } = props;
ReactDOM.render(4、webpack 配置
安装插件 @rescripts/cli。
npm i -D @rescripts/cli
根目录新增 .rescriptsrc.js：
const { name } = require('./package');
module.exports = {
webpack: (config) => {
config.output.library = `${name}-[name]`;
config.output.libraryTarget = 'umd';
config.output.jsonpFunction = `webpackJsonp_${name}`;
config.output.globalObject = 'window';
return config;
},
devServer: (_) => {
const config = _;
config.headers = {
'Access-Control-Allow-Origin': '*',
};
config.historyApiFallback = true;
config.hot = false;
config.watchContentBase = false;
config.liveReload = false;
return config;
},
};
修改 package.json：
"start": "rescripts start",
"build": "rescripts build",