vue3+qiankun项目搭建

https://qiankun.umijs.org/zh

官网上对vue3并没有搭建的支持。以下分几步解决这个问题。

vue3项目搭建

需依次搭建两个项目，分别作为主应用和子应用。（main-qiankun、other-qiankun）


选择默认Vue3模板即可。

qiankun及依赖项引入

npm install qiankun -S   
npm install vuex@4
npm install vue-router

主应用配置

路由配置

import { createRouter, createWebHistory } from "vue-router";

const home = () => import("../home")
const login = () => import("../login")

const routes = [
  { path: "/", redirect: "/home" },
  {
    path: "/home",
    name: "home",
    component: home
  },
  {
    path: "/login",
    name: "login",
    component: login
  }
]

export const router = createRouter({
  history: createWebHistory(),//createWebHashHistroy()路由路径带＃
  routes: routes
})

export default router

qiankun配置

• main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import { registerMicroApps, start } from "qiankun";
const app = createApp(App)
app.use(router).mount('#app')

// 在主应用中注册子应用
registerMicroApps([
  {
    name: "child", //子应用名称
    entry: "//localhost:30000", //子应用启动的地址
    container: "#vue3-demo", // 子应用在主应用的容器名称-对应app.vue中
    activeRule: "/child", // 路由地址-路由跳转到该地址则采用qiankun匹配
    props: {
      data: "child子应用",
    }, //传参
  },
]);
// 启动
start();

跨域配置

• vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 30001, //主应用启动端口号，视情况而定
    headers: {
      "Access-Control-Allow-Origin": "*", // 允许跨域访问子应用页面
    },
  },
})

子应用配置

路由配置

import {
  createRouter,
  createWebHistory
} from 'vue-router'
import '../public-path' // 引入public-path文件
const router = createRouter({
  base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/', // qiankun进入子应用时，返回true
  history: createWebHistory(), // 不带#
  routes: [{
    path: '/',
    redirect: '/child'
  },
  {
    path: '/child',
    component: () => import('@/components/child')    //绑定一个child组件
  }
  ]
})
export default router

qiankun配置

• src路径下添加public-path.js

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

• main.js抛出生命周期钩子

import './public-path'; // 注意需要引入public-path
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store';
let instance = null;

function render({ container } = {}) {
  instance = createApp(App);
  instance.use(router);
  instance.use(store);
  instance.mount(container ? container.querySelector('#app') : '#app');//app.vue有对应的div
}


// 如何独立运行微应用？
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap(props) {
  // 启动
}
export async function mount(props) {
  // 挂载
  render(props);
}
export async function unmount(props) {
  // 卸载
  instance.unmount();
  instance = null;
}

跨域配置

vue.config.js

const { name } = require("./package.json");
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 30000, // 指定端口  与主应用一致
    headers: {
      "Access-Control-Allow-Origin": "*", // 配置跨域
      "Access-Control-Allow-Headers": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Methods": "*",
      "Cache-Control": "no-cache",
    },
    client: {
      overlay: {
        errors: true,
        warnings: false,
      }
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: "umd",
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    }
  },
});

整体效果