Vue defineAsyncComponent 异步组件导入失败：正确处理 @ 符号路径

使用 Vue 的 defineAsyncComponent 函数异步加载组件时，如果路径包含 @ 符号，可能会导致导入失败。本文分析此问题，并提供解决方案。

问题描述：

在以下代码中，loading 和 errorComponent 组件导入成功，但 test 组件（使用 @ 符号别名）导入失败，而 test1 组件（使用相对路径）导入成功。

立即学习“前端免费学习笔记（深入）”；

代码片段：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

import { defineAsyncComponent } from "vue";
import loading from "@/components/loading.vue";
import errorcomponent from "@/components/errorcomponent.vue";

const async_import = (path) => defineAsyncComponent({
    loader: () => import(path),
    delay: 0,
    timeout: 500000,
    errorcomponent: errorcomponent,
    loadingcomponent: loading
});

// 使用@符号导入失败
export const test = async_import("@/components/test001.vue");
// 使用相对路径导入成功
export const test1 = async_import("./components/test001.vue");

问题分析与解决方案：

问题在于 import(path) 语句无法正确解析包含 @ 符号的路径字符串。

解决方案： 使用模板字面量动态拼接路径。 不要直接将 "@/components/test001.vue" 作为 import 参数，而应使用模板字面量将 @/components/ 和 path 变量拼接。

修改后的代码：

import { defineAsyncComponent } from "vue";
import Loading from "@/components/Loading.vue";
import ErrorComponent from "@/components/ErrorComponent.vue";

const async_import = (path) => defineAsyncComponent({
    loader: () => import(`@/components/${path}`), // 修改此处
    delay: 0,
    timeout: 500000,
    errorComponent: ErrorComponent, // 命名规范化
    loadingComponent: Loading     // 命名规范化
});

export const Test = async_import("Test001.vue"); // 修改此处，文件名首字母大写，保持一致性
export const Test1 = async_import("./components/Test001.vue");

通过模板字面量 `/components/${path}，动态拼接路径，import 语句即可正确解析，成功导入组件。编译器处理 @ 符号，运行时根据 path 变量加载组件。 同时，代码中也对组件名进行了规范化处理，使之与文件名保持一致。