react+vite 已经可以了，但 vue+vite 还不行。。。

[rxliuli]

可复现示例：https://github.com/rxliuli/micro-app-demo

overlay.ts:185 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vite-error-overlay" has already been used with this registry

vite 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

//useDevMode 开启时与热更新插件冲突
const useDevMode = true

export default defineConfig({
  plugins: [
    //TODO vue 仍然不能正常支持
    vue(),
    qiankun('vue-app', {
      useDevMode,
    }),
  ],
  server: {
    port: 3102,
    cors: true,
  },
})

src/main.ts

import { createApp, App as VueInstance } from 'vue'
import App from './App.vue'

import {
  renderWithQiankun,
  qiankunWindow,
} from 'vite-plugin-qiankun/dist/helper'
import {
  createRouter,
  createWebHashHistory,
  Router,
  RouterHistory,
} from 'vue-router'
import { routeList } from './constants/routeList'

let app: VueInstance | null = null
let history: RouterHistory | null = null
let router: Router | null = null

function render(props: any) {
  const { container } = props
  app = createApp(App)
  history = createWebHashHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? '/app/vue-app' : '',
  )
  router = createRouter({
    history: history,
    routes: routeList,
  })
  app.use(router)
  app.mount(
    container
      ? container.querySelector('#root')
      : document.getElementById('root'),
  )
}

renderWithQiankun({
  mount(props) {
    console.log('vue mount')
    render(props)
  },
  bootstrap() {
    console.log('bootstrap')
  },
  unmount(props: any) {
    console.log('vue unmount')
    app!.unmount()
    ;(app!._container as HTMLDivElement).innerHTML = ''
    app = null
    router = null
    history!.destroy()
    history = null
  },
})

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

---

react 版本其实也有个不影响运行的错误

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vite-error-overlay" has already been used with this registry

[rxliuli]

可以添加一个 vite+vue 的示例么？

[tengmaoqing]

我运行了一下你的demo， vue 是能够起来的啊。

不过页面会一直自动刷新，不知道你是哪个逻辑控制着刷新。 我使用的linux跑的代码，你可以提供一下你的环境信息。 解决一下代码自动刷新的问题然后我们再排查一下吧。

[tengmaoqing]

可以添加一个 vite+vue 的示例么？

这周我抽空看看加一下

[rxliuli]

我运行了一下你的 demo， vue 是能够起来的啊。

不过页面会一直自动刷新，不知道你是哪个逻辑控制着刷新。 我使用的 linux 跑的代码，你可以提供一下你的环境信息。 解决一下代码自动刷新的问题然后我们再排查一下吧。

哦，是因为主应用修改为了 history 路由，子应用是 hash 路由

[rxliuli]

稍等

[rxliuli]

已添加错误示例：https://github.com/rxliuli/micro-app-demo/tree/bug_vite-plugin-qiankun

[tengmaoqing]

这里面base没有设置正确，导致你的vue 404了。 按照我截图里面调整后就可以正常展示了

[rxliuli]

这里面 base 没有设置正确，导致你的 vue 404 了。 按照我截图里面调整后就可以正常展示了

吾辈这儿似乎还是不行，可否发个 git patch？

[tengmaoqing]

我只改了上面两行代码。 对比一下环境 vite@2.5.0 吧. 然后我这边没有你说 "vite-error-overlay" 这个错误， https://github.com/vitejs/vite/issues/4023 vite前面的版本好像是有报这个错误

[rxliuli]

我只改了上面两行代码。 对比一下环境 vite@2.5.0 吧. 然后我这边没有你说 "vite-error-overlay" 这个错误， vitejs/vite#4023 vite前面的版本好像是有报这个错误

不，现在错误变成了

[Vue Router warn]: A hash base must end with a "#":
"#/app/vue-app" should be "#".

[tengmaoqing]

这只是一个警告， 你还有一行最关键的代码没改

[rxliuli]

这只是一个警告， 你还有一行最关键的代码没改

抱歉，是吾辈蠢了。。。

[rxliuli]

再次出现了这个问题，但吾辈这次无法提供一个最小可复现示例，因为吾辈在迁移生产环境的应用。。。

[rxliuli]

再次出现了这个问题，但吾辈这次无法提供一个最小可复现示例，因为吾辈在迁移生产环境的应用。。。

通过升级生产环境的 vite/vue 解决，具体灵感来自：https://github.com/tengmaoqing/vite-plugin-qiankun/issues/3#issuecomment-900160311

---

另外，qiankun 和 ant-design-vue 一起使用时，子应用的样式影响到父应用的问题一般怎么解决？ 吾辈尝试了 shandbox 配置，但并未生效

复现步骤

1. git clone && yarn install
2. cd apps/vue-app && yarn dev
3. cd apps/main-app && yarn dev
4. 打开 http://localhost:3000/app/vue-app

[rxliuli]

再次出现了这个问题，但吾辈这次无法提供一个最小可复现示例，因为吾辈在迁移生产环境的应用。。。

通过升级生产环境的 vite/vue 解决，具体灵感来自：#3 (comment)

另外，qiankun 和 ant-design-vue 一起使用时，子应用的样式影响到父应用的问题一般怎么解决？ 吾辈尝试了 shandbox 配置，但并未生效

复现步骤

1. git clone && yarn install
2. cd apps/vue-app && yarn dev
3. cd apps/main-app && yarn dev
4. 打开 http://localhost:3000/app/vue-app

吾辈在 sf 创建了一个问题：https://segmentfault.com/q/1010000040537727

[tengmaoqing]

乾坤子应用污染父应用样式是官方问题，里面有解释原因，不知道你说的是否是这个意思。 https://qiankun.umijs.org/zh/faq#%E5%A6%82%E4%BD%95%E7%A1%AE%E4%BF%9D%E4%B8%BB%E5%BA%94%E7%94%A8%E8%B7%9F%E5%BE%AE%E5%BA%94%E7%94%A8%E4%B9%8B%E9%97%B4%E7%9A%84%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

[rxliuli]

乾坤子应用污染父应用样式是官方问题，里面有解释原因，不知道你说的是否是这个意思。 https://qiankun.umijs.org/zh/faq#%E5%A6%82%E4%BD%95%E7%A1%AE%E4%BF%9D%E4%B8%BB%E5%BA%94%E7%94%A8%E8%B7%9F%E5%BE%AE%E5%BA%94%E7%94%A8%E4%B9%8B%E9%97%B4%E7%9A%84%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

不是，吾辈指的是子应用的样式应用到了父应用，例如 body/h1~h6 这些

[tengmaoqing]

乾坤本身不能避免父应用和子应用的样式污染。 如果定位到是因为插件引起的问题，可以重新开一个issue，这个先关闭了哈。

[LiZheGuang]

再次出现了这个问题，但吾辈这次无法提供一个最小可复现示例，因为吾辈在迁移生产环境的应用。。。

通过升级生产环境的 vite/vue 解决，具体灵感来自：#3 (comment) 另外，qiankun 和 ant-design-vue 一起使用时，子应用的样式影响到父应用的问题一般怎么解决？ 吾辈尝试了 shandbox 配置，但并未生效 复现步骤

1. git clone && yarn install
2. cd apps/vue-app && yarn dev
3. cd apps/main-app && yarn dev
4. 打开 http://localhost:3000/app/vue-app

吾辈在 sf 创建了一个问题：https://segmentfault.com/q/1010000040537727

hi~ 一直刷新的问题，该怎么解决呢？已经按照抒写了，但还是存在主应用里打开后，页面一直刷新