vue3 + ts + qiankun2 微服务搭建

vite目前暂不支持qiankun

qiankun官网：https://qiankun.umijs.org/zh/guide

主应用(vue2版本)

安装qiankun ：$ yarn add qiankun # 或者 npm i qiankun -S

main.js

  import { registerMicroApps, start } from "qiankun";
  // 定义要整合的微应用列表
  const apps = [
    {
      name: "vue", // 应用的名字
      entry: "http://localhost:10003/", // 默认加载这个html，解析里面的js动态的执行（子应用必须支持跨域，内部使用的是 fetch）
      container: "#VUE", // 要渲染到的容器名id--> APP页面中
      activeRule: "#/vue", // 通过哪一个路由来激活
    },
  ];
  // 注册应用
  registerMicroApps(apps);
  // 开启应用
  start();

APP.vue

<template>
  <div>
    <router-link to="/vue">vue子应用3</router-link>
    <router-view></router-view>
    <div id="VUE"></div>
  </div>
</template>

子应用

src目录下新建 public-path.ts文件,并在main.ts顶部中导入

public-path.ts

  let w: any = window;
  if (w.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = w.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

main.ts

  import "./public-path.ts";
  import { createApp } from "vue";
  import App from "./App.vue";
  import router from "./router";
  import store from "./store";

  // 为保证子应用也可以独立运行，需做以下判断
  (window as any).__POWERED_BY_QIANKUN__ ? "" : render();

  function render() {
    createApp(App).use(store).use(router).mount("#vueApp");
  }

  // 必须导出生命周期
  export async function bootstrap(props: any) {
    console.log("[vue] vue app bootstraped");
  }
  export async function mount(props: any) {
    console.log("mount");
    render(); //一般需等mount后再渲染挂载
  }
  export async function unmount(props: any) {
    console.log("unmount");
  }

vue.config.js

  const { name } = require("./package");

  module.exports = {
    publicPath: "./", //基本路径
    outputDir: "dist", //构建时的输出目录
    assetsDir: "static", //放置静态资源的目录
    indexPath: "index.html", //html 的输出路径
    filenameHashing: true, //文件名哈希值
    lintOnSave: true, //是否在保存的时候使用 `eslint-loader` 进行检查。

    //组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
    //template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
    //runtime-only：将template在打包的时候，就已经编译为render函数
    //runtime-compiler：在运行的时候才去编译template
    runtimeCompiler: false,

    transpileDependencies: [], //babel-loader 默认会跳过 node_modules 依赖。
    productionSourceMap: false, //是否为生产环境构建生成 source map？

    configureWebpack: {
      output: {
        // 把子应用打包成 umd 库格式
        library: `${name}-[name]`,
        libraryTarget: "umd",
        jsonpFunction: `webpackJsonp_${name}`,
      },
    },

    // 配置 webpack-dev-server 行为。
    devServer: {
      open: true, //编译后默认打开浏览器
      host: "0.0.0.0", //域名
      port: 10003, // 端口
      https: false, //是否https
      headers: {
        "Access-Control-Allow-Origin": "*", //********子应用中必须设置跨域******************
      },
      //显示警告和错误
      overlay: {
        warnings: false,
        errors: true,
      },
      // proxy: {
      //     '/api': {
      //         target: 'http://*******',
      //         changeOrigin: true, //是否跨域
      //         ws: false, //是否支持websocket
      //         secure: false, //如果是https接口，需要配置这个参数
      //         pathRewrite: {
      //             '^/api': ''
      //         }
      //     }
      // }
    },
  };

router/index.ts

  import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
  import Home from "../views/Home.vue";

  const routes: Array<RouteRecordRaw> = [
    //独立运行
    {
      path: "/",
      redirect: "/vue/home",
    },
    //主应用中运行
    {
      path: "/vue", //许河主应用activeRule对应
      redirect: "/vue/home",
    },
    {
      path: "/vue/home",
      name: "Home",
      component: Home,
    },
    {
      path: "/vue/about",
      name: "About",
      component: () => import("../views/About.vue"),
    },
  ];
//配置独立运行 或 主应用运行
  let base: string = (window as any).__POWERED_BY_QIANKUN__ ? "/vue" : "";
  // function setBASE(params: Array<RouteRecordRaw>) {
  //   params.forEach((item) => {
  //     // let addSign = item.path.indexOf("/") == 0 ? "" : "/";
  //     item.path = base + item.path;
  //     if (item.children) {
  //       setBASE(item.children);
  //     }
  //   });
  //   return params;
  // }
  // const baseRoutes = setBASE(routes);
  // console.log(baseRoutes, "baseRoutes");
  const router = createRouter({
    history: createWebHashHistory(base),
    routes,
  });

  export default router;