vue3 怎么使用动态import按需加载组件？

Question

component: (resolve) => require([@/views${data.path}.vue], resolve)

在vue cli4.x , Router4创建的项目。

在做按需加载组件时，component: (resolve) => require([@/views${data.path}.vue], resolve)，组件需要根据后台传入的地址进行加载，也就是动态import语法，这样webpack编译时能够找到相应的组件。但是上面这种写法在编译时，发现控制台报错No match found for location with path，总是匹配不到路径。

Answer 1

<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'

// 需要加载的组件集合
const components = ref(new Map<string, any>())
components.value.set(
  'MyTag',
  defineAsyncComponent(() => import('./MyTag.vue'))
)
components.value.set(
  'Item',
  defineAsyncComponent(() => import('./Item.vue'))
)
// 默认加载的组件名
const compName = ref('MyTag')
// 组件切换
function onClick() {
  if (compName.value === 'MyTag') {
    compName.value = 'Item'
  } else {
    compName.value = 'MyTag'
  }
}
</script>

<template>
  <div>
    <el-button @click="onClick">改变组件</el-button>
    <component :is="components.get(compName)"></component>
  </div>
</template>

<style lang="scss" scoped></style>