vue项目配置“@/xxx”可跳转到具体文件

分析

jsconfig.json 文件是 Visual Studio Code (VSCode) 用于配置 JavaScript 项目的文件。它告诉 VSCode 项目根目录在哪里，以及如何解析项目中的文件和模块。具体来说，jsconfig.json 的作用包括以下几个方面：

主要功能：

1. 项目范围设置：
   • jsconfig.json 文件定义了哪些文件是属于项目的一部分。这样，VSCode 可以在这些文件中启用智能感知（IntelliSense）、代码导航和错误检测。
2. 模块解析配置：
   • jsconfig.json 文件允许你配置模块解析规则，例如路径别名。这对于使用像 Vue.js 这样的框架非常有用，因为它们经常使用路径别名（如 @/components）来简化文件路径的书写。
3. 排除文件：
   • 你可以使用 exclude 选项来指定哪些文件或目录应该被排除在项目之外。例如，编译输出目录（如 dist）和依赖目录（如 node_modules）通常会被排除。

如何工作：

当你在项目中创建或编辑 jsconfig.json 文件并保存后，VSCode 会根据配置内容解析项目中的文件和模块。这包括：

• 启用代码智能感知（IntelliSense），提供自动补全、参数提示、函数签名等功能。
• 支持路径别名的跳转功能，使你可以使用别名路径在项目中导航。
• 提供代码错误和警告提示，帮助你发现和修复问题。

解决

1、在vue项目根目录下新增jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "es6",
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2、重启vscode。