持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

一、前言

本篇主要介绍在vue3+vite3项目中如何动态加载异步组件。在项目开发过程中，有时候我们会需要在同一个页面引入一些列的组件，常规的方式我们会使用一堆的import将对应文件夹下的组件引入，这样写太过于臃肿，所以咱们可以批量动态加载。

二、实现步骤

这里咱们主要是借助了vue3的defineAsyncComponent异步组件和vite3的Glob导入功能。

1.关于defineAsyncComponent

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能，并且我们也可以用它来导入 Vue 单文件组件

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

最后得到的 AsyncComp 是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数

2.关于Glob导入

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块，默认这个方法是异步的，我们需要加上第二个参数{ eager: true }同步获取。

const modules = import.meta.glob('./dir/*.js', { eager: true })

3.实现

首先我的文件目录如图所示

实现代码如下

<template v-for="item in comArr">
    <component :is="item" />
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
// 动态获取异步组件集合
const modules = import.meta.glob('./*/*.vue', { eager: true })
// 声明一个对象承载异步加载来的组件
let comObj:Record<string, object> = {}
for (const path in modules) {
    // 获取组件文件的名称，这里以vue文件名称作为对象的key
    const key:string = path.replace(/(.*\/)*([^.]+).vue/ig, "$2")
    comObj[key] = defineAsyncComponent(() => 
      import(path)
    )
}
// 所有动态加载的异步组件集合
const comArr = Object.values(comObj)

以上我们就实现了批量动态加载异步组件。

三、后记

批量导入主要用在router、vuex、和一些动态组件引入的地方。最近在尝试搭建一个表单设计器，用到这个功能，写出来跟大家分享下。

本篇完结！ 撒花！ 感谢观看！ 希望能帮助到你！