Vetur 中从父文件夹导入 @ 模块的终极指南

在 Vetur 中从父文件夹导入 @ 模块

前言

在开发 Vue 项目时，使用别名导入模块可以简化代码结构并提高可读性。然而，当您从项目外部的父文件夹打开代码时，Vetur 可能会出现找不到模块的错误。本文将深入探讨此问题及其解决方案，指导您在父文件夹中成功导入 @ 模块。

Vetur 的路径解析

Vetur 使用 TypeScript 编译器（tsc）解析路径，而 tsc 依赖于 tsconfig.json 文件中的 paths 属性来解析别名。paths 属性指定别名与文件路径之间的映射。当您在项目根目录（包含 tsconfig.json 和 package.json 文件）中打开代码时，Vetur 能够正确解析别名，因为 tsconfig.json 文件位于与代码文件相同的目录中。

问题：父文件夹中的路径解析错误

但是，当您从项目外部的父文件夹打开代码时，Vetur 将无法正确解析别名。这是因为 tsconfig.json 文件不再位于与代码文件相同的目录中，导致 tsc 无法找到 paths 属性。

解决方案：添加扩展路径

为了解决此问题，您需要将项目的相对路径添加到 tsconfig.json 文件中的 paths 属性中。具体来说，您需要将父文件夹的相对路径添加到别名映射中。

例如，假设您的项目文件夹名为 my_project，位于父文件夹 my_project_parent 中，并且别名为 @ 指向 src 文件夹。您需要在 tsconfig.json 文件中添加以下路径：

{
  "paths": {
    "@/*": [
      "./src/*",
      "../my_project_parent/my_project/src/*"
    ]
  }
}

通过添加扩展路径，您告诉 Vetur 从父文件夹中查找别名指向的模块。

代码示例

在 App.vue 文件中，您可以使用以下语法导入模块：

import { Testing } from '@/Testing'

注意事项

• 确保您已安装最新版本的 Vetur 扩展。
• 重新启动 VSCode 以使更改生效。
• 如果您仍然遇到问题，请检查您的 tsconfig.json 文件是否存在其他错误。

常见问题解答

1. 为什么 Vetur 无法从父文件夹中解析别名？

   • 因为 tsconfig.json 文件不再位于与代码文件相同的目录中。

2. 我应该将哪些路径添加到 paths 属性中？

   • 父文件夹的相对路径以及别名指向的目录路径。

3. 我可以从任何文件夹导入 @ 模块吗？

   • 可以，但您需要确保在 tsconfig.json 文件中正确设置路径。

4. 除了别名，还有其他方法可以在 Vetur 中导入模块吗？

   • 是的，您可以使用相对路径或绝对路径。

5. 如果我更新了 tsconfig.json 文件，我需要做什么？

   • 重新启动 VSCode 以使更改生效。

结论

通过在 tsconfig.json 文件中添加扩展路径，您可以轻松地在父文件夹中从 Vetur 导入 @ 模块。通过遵循本文中的步骤，您可以解决此问题并享受使用别名导入模块的便利性，无论您从哪个文件夹打开代码。