qiankun中主应用和子应用都是vue2框架，路由模式都为hash，且publicPath都不一样，在注册启动后报错，并且什么样的路由会命中微应用规则

关于 qiankun 中主应用和子应用报错的问题，可能是由于路由模式不同导致的，建议将主应用和子应用的路由模式都改为 `history`，并且确保所有应用的 `publicPath` 都正确配置。

路由命中微应用规则的条件如下：

1. 路径要以微应用的 `activePath` 开头；
2. 如果微应用的 `exact` 属性为 `true`，则路径需要与 `activePath` 完全匹配；
3. 如果微应用的 `exact` 属性为 `false`，则路径只需要匹配到 `activePath` 即可。

举个例子，如果一个微应用的 `activePath` 为 `/app1`，那么以下路径都会命中该微应用：

- `/app1`
- `/app1/page1`
- `/app1/page2`
- `/app1/subapp1`

但以下路径不会命中该微应用：

- `/app1page1`
- `/app1page2`
- `/app2/page1`

相关问题

vue的qiankun子应用为什么hash路由跳转不成功

在使用 Qiankun 开发子应用时，如果子应用使用的是 hash 模式路由，需要在子应用的入口文件中，手动初始化路由。

在 Vue 的子应用中，可以在 `main.js` 文件中进行路由初始化，具体实现如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 手动初始化路由
let instance = null

function render(props = {}) {
  const { container } = props

  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// 如果不是作为子应用使用，则直接渲染应用
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 导出生命周期钩子函数
export async function bootstrap() {}

export async function mount(props) {
  // 初始化路由
  render(props)
}

export async function unmount() {
  // 销毁实例
  instance.$destroy()
  instance = null
}

在这里，我们通过 `render` 函数手动初始化了路由，并在 `mount` 钩子中再次调用 `render` 函数，以保证子应用在挂载时能够正确初始化路由。

另外，需要注意的是，在切换子应用时，主应用会将当前的路由信息传递给子应用，因此，子应用需要在接收到这些信息后自行进行路由跳转。你可以通过监听 `qiankun` 的 `routeChange` 事件来实现这个功能，具体实现如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 手动初始化路由
let instance = null

function render(props = {}) {
  const { container } = props

  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// 如果不是作为子应用使用，则直接渲染应用
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 导出生命周期钩子函数
export async function bootstrap() {}

export async function mount(props) {
  // 初始化路由
  render(props)

  // 监听 routeChange 事件
  props.onGlobalStateChange((state, prev) => {
    if (state.type === 'vue2_subapp_route_change') {
      const { path } = state.payload
      router.push(path)
    }
  })
}

export async function unmount() {
  // 销毁实例
  instance.$destroy()
  instance = null
}

在这里，我们通过 `props.onGlobalStateChange` 监听 `routeChange` 事件，并在事件回调函数中跳转路由。当主应用切换路由时，会触发这个事件，从而实现路由跳转。

qiankun vue2主应用+vite vue3子应用+ts 子应用如何配置？

Qiankun（前言）是一个用于构建微前端架构的开源库，它允许在单页面应用（SPA）中嵌入和管理多个独立的Vue应用（比如Vue2和Vue3）。当你有Vue2作为主应用和Vue3作为子应用，并且整个系统使用TypeScript（TS）进行类型安全的开发时，可以按照以下步骤进行配置：

1. **安装依赖**:
- 主应用（Vue2）需要`vue`、`vuex`等核心库，而子应用（Vue3）需要`@vue/cli`、`vite`、`typescript`以及可能的`vue-router`等。

   npm install -D vue vuex vite @vue/cli/typescript

2. **创建Vite项目（子应用）**:
使用`vue create`命令创建一个新的Vue3 Vite项目，并启用TS支持。

   vue create subapp --type=vite --template=webpack --target=esnext --runtime-config tsconfig.runtime.json --ts

3. **配置子应用**:
- 更新`vite.config.ts`文件，指定入口文件和输出路径。
- 添加`tsconfig.runtime.json`文件以处理TS编译。

4. **使用Qiankun**:
- 安装并引入Qiankun及其相关的插件，如`qiankun-plugin-vue`。

   npm install qiankun qiankun-plugin-vue

5. **主应用配置**:
- 在`main.js`或`qiankun-entry.js`中配置Qiankun实例，加载子应用，并设置路由映射。
- 需要注意的是，由于Vue2和Vue3的差异，你需要在Qiankun里处理不同版本之间的组件通信。

6. **类型安全**:
- 在主应用中导入的子应用暴露的API需要声明类型，以确保类型兼容。可以利用TypeScript的import类型注解或全局的type声明。

7. **打包与部署**:
分别对主应用和子应用进行构建，然后将子应用的静态资源放在特定目录下供Qiankun访问。