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;