问题描述

使用 vue3+vite 作为子应用，多次进入子应用，并使用浏览器回退历史记录的方法返回其他页面，会出现页面地址 undefined 的问题

解决方法

问题原因未知，实测在 qiankun 卸载钩子中卸载 vue 实例后，没有复现该问题

renderWithQiankun({
  // ...
  unmount() {
    app.unmount();
  },
});

问题描述

使用 vue3+vite 作为子应用时，切换其他子应用后再次进入时，会出现白屏子应用没有正常加载的现象，并且控制台出现警告信息

解决方法

问题原因为多次创建子应用实例，将createApp移动到 render 方法中

const render = (props: QiankunProps) => {
  const app = createApp(App);
  const { container } = props;
  app.use(createPinia());
  app.use(router);
  app.use(ElementPlus);
  app.mount(container ? container.querySelector('#app')! : '#app');
};

问题描述

基座应用和子应用均使用 vue3 搭建，并使用 vue 调试插件 vite-plugin-vue-devtools，嵌入时会出现插件冲突，并显示以下报错

解决方法

只需要在子应用的 vite.config.ts 中注释插件即可

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      vueJsx(),
      // vueDevTools(),
      qiankun(name, { useDevMode: true }),
    ],
    // ...
  };
});

在使用 qiankun 集成项目时发现，接入子项目时出现跨域问题

vue2+webpack 项目

集合 vue2+webpack 项目报错

解决方法

在 vue.config.js 中配置

module.exports = defineConfig({
  // ...
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
});

使用 qiankun 集成 vue2+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

使用 qiankun 集成 vue2+webpack 项目

基座项目

基座项目可见qiankun 示例

子应用改造

子应用不需要额外安装任何其他依赖即可接入 qiankun 主应用

配置环境变量

配置环境变量，是子应用既可以单独运行又可以接入主应用

然后在 package.json 中配置启动脚本

使用 qiankun 集成 vue3+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

vue3 新增了 setup 语法糖，相应的 props，也会有相应的变化

defineProps

在使用 <script setup> 语法糖的组件中，props 可以使用 defineProps() 宏来声明

在 Vue3 中，定义一个全局变量，便于在各个文件中直接使用，而无需每次都引入

设置全局变量

通过在 main.ts 入口文件中注册 Vue 的时候绑定全局变量，这里以 http 模块为例

import { createApp } from 'vue';
import App from './App.vue';
import http from './http';

const app = createApp(App);
app.config.globalProperties.$http = http;

app.mount('#app');