微前端qiankun的使用—

微前端qiankun的使用——实践

news2024/12/25 4:20:02

qiankun

在这里插入图片描述

创建主应用项目——vue2

main.js注册子应用

$ yarn add qiankun # 或者 npm i qiankun -S

import { registerMicroApps, start } from 'qiankun';
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "lib-flexible";

import { Button } from "vant";
Vue.use(Button);

Vue.config.productionTip = false;
// 注册子应用
registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:8081',
    container: '#container',
    activeRule: '/app-a',
  },
  {
    name: 'vueApp1',
    entry: '//localhost:8082',
    container: '#container',
    activeRule: '/app-b',
  }
]);

// 启动 Qiankun
start();
import service from "./utils/request";
Vue.prototype.$axios = service;
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

创建子应用容器

3.路由history模式

4.首页跳转链接

<template>
  <div>
    <h1>主应用门户页面</h1>

    <router-link to="/app-a">前往子应用 A</router-link>
    <br />
    <router-link to="/app-b">前往子应用 B</router-link>
  </div>
</template>

子应用 app-a

在 src 目录新增 public-path.js

== bug：下面注释不能删掉，否则会报错 ==

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

入口文件 main.js 修改

import './public-path';
import Vue from "vue";
import App from "./App.vue";
import VueRouter from 'vue-router';
import { routes } from "./router/index";
import store from "./store";
import "lib-flexible";

import { Button } from "vant";
Vue.use(Button);

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-a/' : '/', // 注意这里的路由需要和主应用的注册路由一致
    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(11111111, 'app-a mount', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
  console.log(11111111, 'app-a unmount');
}
import service from "./utils/request";
Vue.prototype.$axios = service;



// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

路由文件，注意导出路由数组routes 和路由实例 router

import Vue from "vue";
import VueRouter from "vue-router";
import home from "../views/home/index.vue";

Vue.use(VueRouter);

export const routes = [
  {
    path: "/",
    name: "home",
    component: home,
  },
  {
    path: "/course",
    name: "course",
    component: () => import("../views/course/index.vue"),
  },
];

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

export default router;
Vue.use(VueRouter);

打包配置修改（vue.config.js）

const { defineConfig } = require("@vue/cli-service");
const { name } = require('./package');
module.exports = defineConfig({
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },

    proxy: {
      //配置跨域
      "/stage-api": {
        target: "http://192.168.0.19:8801", //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true, //允许跨域
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
            实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
           */
          "^/stage-api": "/",
        },
      },
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
    },
  },
});