工具使用版本

  • node –> 16+
  • @vue/cli –> 5+

创建文件

创建文件夹qiankun-test。

使用vue脚手架创建主应用main和子应用dev

主应用

安装 qiankun:

yarn add qiankun或者 npm i qiankun -S

使用qiankun：

  1. 在 utils 内创建 微应用文件夹 microApp,在该文件夹内创建微应用出口文件 index.js，路由文件 microAppRouter,配置函数文件 microAppSetting。

  2. 路由文件 microAppRouter

    // 微应用路由const microAppRouter = [{name: "dev", //用于应用名 容器id 应用路由基地址url: "//localhost:8080", //应用路径（ip与端口）props: { propsName: "8080" }, //初始化时需要传递给微应用的数据// hidden: false,//是否启用该应用，默认falsemenuName: "dev",//自定义属性 根据需要自己配置（用在了菜单导航的名称）},];export default microAppRouter;

  3. 配置函数文件 microAppSetting

    // 引入路由import microAppRouter from "./microAppRouter";// 微应用配置const microAppSetting = {};export default microAppSetting;/** * @description: 配置子应用 * @param {*} * @return {*} */microAppSetting.microApps = () => {let apps = [];microAppRouter.map((item) => {if (!item.hidden) {apps.push({name: item.name, //应用名(不可重复)entry: item.url, //默认加载应用路径(ip与端口)container: `#${item.name}`, //容器idactiveRule: `/${item.name}`, //激活该应用的路径hash模式+#（子应用路由基地址）...item,});}}); return apps;};

  4. 微应用出口文件 index.js

    // 引入 qiankun应用注册函数 开启函数import { registerMicroApps, start } from "qiankun";// 引入 微应用配置文件import microAppSetting from "./microAppSetting";//注册子应用registerMicroApps(microAppSetting.microApps());//开启start({sandbox: {strictStyleIsolation" /> 主应用{{ item.menuName }}// 引入子应用路由import microAppRouter from "@/utils/microApp/microAppRouter";export default {name: 'App',data() {return {microAppDom_Router: microAppRouter,};}}
  5. 在main.js文件内引入微应用出口文件 index.js
import "@/utils/microApp/index";

7. 路由文件router.js

const router = new VueRouter({mode: "history",routes})

子应用配置

  1. 在src中增加public-path.js文件
    //public-path.jsif (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}
  2. 在main.js文件内导出生命周期钩子
    import Vue from 'vue'import App from './App.vue'import './public-path'Vue.config.productionTip = falselet instance = null;function render(props = {}) {const { container } = props;// Vue.use(router)instance = new Vue({render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');}// 独立运行时if (!window.__POWERED_BY_QIANKUN__) {render();}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;}

  3. 配置Webpack、跨域与端口号

    const { defineConfig } = require('@vue/cli-service')const { name } = require('./package');module.exports = defineConfig({devServer: {headers: {'Access-Control-Allow-Origin': '*',},},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式//jsonpFunction: `webpackJsonp_${name}` // webpack5废弃jsonpFunctionchunkLoadingGlobal: `webpackJsonp_${name}`, },},});
  4. 路由文件router.js
const router = new VueRouter({mode: "history",base: "/dev",routes,});

报 ____webpack_public_path__未定义的问题
解决：
根据创建项目时选择的配置，在package.json文件内添加全局配置

module.exports = {---globals: {__webpack_public_path__: "writable",},---};

报子应用接口404问题
解决：

主应用vue.config.js配置代理

module.exports = defineConfig({---devServer: {proxy: {'/api1': { // 匹配所有以'/api1' 开头的请求路径target: 'http://localhost:8080/', // 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api1':''}}},},---})