Vue3如何在运行时正确动态导入模态框等组件

Vue 3 完全支持运行时动态导入组件，原有代码不生效是两个核心原因：

• App.component() 全局注册API需要在应用mount()挂载前调用，运行阶段在watch里注册的组件无法被已经渲染的模板识别
• 构建工具（Vite/Webpack/Rollup）在编译阶段需要静态分析import()的路径来做代码分割，传入完全动态的无固定前缀的变量路径，会导致构建工具无法定位目标文件，加载失败

推荐实现方式 #

优先使用官方提供的动态组件+异步组件API实现，不需要运行时做全局注册，适配绝大多数模态框按需加载场景：

1. 模板中使用内置的<component>标签作为动态组件的挂载点
2. 用defineAsyncComponent包裹动态导入逻辑，注意导入路径必须保留固定前缀，不能传入完全动态的完整路径
3. 监听模态框标识变化时加载对应组件，控制显隐即可

完整示例代码：

<template>
  <!-- 动态模态框挂载点 -->
  <component :is="currentModal" v-if="modalVisible" @close="modalVisible = false" />
  <button @click="triggerModal('UserEditModal')">打开编辑用户模态框</button>
</template>

<script setup>
import { ref, watch, defineAsyncComponent } from 'vue'

// 存储当前要加载的模态框组件标识（对应文件名）
const activeModalKey = ref('')
const currentModal = ref(null)
const modalVisible = ref(false)

watch(activeModalKey, (modalKey) => {
  if (!modalKey) return
  // 注意：import路径必须写死公共前缀，比如所有模态框都存放在src/components/modals/目录下
  // 仅文件名部分动态，构建工具才能在编译阶段扫描对应目录生成正确的分包
  currentModal.value = defineAsyncComponent(() => 
    import(`./components/modals/${modalKey}.vue`)
  )
  modalVisible.value = true
})

const triggerModal = (modalKey) => {
  activeModalKey.value = modalKey
}
</script>

注意：动态import的路径不能是纯动态变量，必须保留至少一段固定路径前缀，文件后缀也建议固定写死，否则构建阶段无法完成资源匹配。

如果需要实现命令式调用模态框（不需要提前在模板写挂载点，直接调用函数弹出），可以手动创建挂载节点渲染：

import { createVNode, render, defineAsyncComponent } from 'vue'

export function openModal(modalKey, props = {}) {
  const mountNode = document.createElement('div')
  document.body.appendChild(mountNode)

  const AsyncModalComp = defineAsyncComponent(() => 
    import(`./components/modals/${modalKey}.vue`)
  )

  const vnode = createVNode(AsyncModalComp, {
    ...props,
    onDestroy: () => {
      render(null, mountNode)
      mountNode.remove()
    }
  })

  render(vnode, mountNode)
}

内容的提问来源于stack exchange，提问作者user19395233