aidenC尝试qiankun项目1.0

aidenC尝试qiankun项目随笔

## 1. 项目搭建
主应用：vue2
子应用：vue2（老项目平台） X2
## 2.具体配置
主应用
vue.config.js

module.exports = {
   transpileDependencies: ["single-spa", "qiankun", "import-html-entry"],
   };

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router/index.js";
import store from "./store/index.js";
import { registerMicroApps, start } from "qiankun";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount("#app");

registerMicroApps([
  {
    name: "campus-gang",
    entry: "http://192.168.1.174:1111/",
    container: "#container",
    activeRule: "/campus-gang",
    props: { data: { store, router } },
  },
  {
    name: "charge-back",
    entry: "http://192.168.1.174:2222/",
    container: "#container",
    activeRule: "/charge-back",
    props: { data: { store, router } },
  },
]);
start();

App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      |
      <router-link to="/showAbout">showAbout</router-link>
      |
      <router-link to="/campus-gang/">campusGang</router-link>
      |
      <router-link to="/charge-back/">chargeBack</router-link>
    </nav>
    <div id="container" />
    <router-view />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

子应用
src文件下新建【public-path.js】

  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

vue.config.js

const { name } = require("./package");
module.exports = {
  devServer: {
    port: 1111,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  chainWebpack: config => {
    config.module
      .rule("fonts")
      .test(/.(ttf|otf|eot|woff|woff2)$/)
      .use("url-loader")
      .loader("url-loader")
      .tap(() => ({ name: "/fonts/[name].[hash:8].[ext]" }))
      .end();
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: "umd",
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  },
};

main.js

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import "./public-path";
import routes from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount("#campusGang");

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? "/campus-gang/" : "/",
    mode: "history",
    routes,
  });

  instance = new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount(container ? container.querySelector("#campusGang") : "#campusGang");
}

// 独立运行时
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;
  router = null;
}

index.html
此处的id与main.js中$mount(container ? container.querySelector("#campusGang") : "#campusGang")

<div id="campusGang"></div>

3.问题慢慢汇总

1. 主应用vue3与子项目Vue2，通过VUEX做数据交互，存在版本兼容性问题