在vscode中配置Vue项目的别名路径联想提示

用npm init vue@latest创建了一个Vue3项目。创建成功以后，项目根目录下面的package.json内容如下：

在编写代码的过程中，一旦输入@/，vscode会立刻联想出src目录下的所有子目录和文件，统一路径访问不容易出错。如下的效果：

要产生上面的路径联想提示，需要在项目根目录下面的jsconfig.json文件中进行配置。我创建项目的时候已经自动生成了jsconfig.json这个文件（如果没有自动生成，就自己新建一个），内容如下：

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

备注：上面jsconfig.json文件中配置的paths中的@仅仅是做提示用的，并不能完成真正的路径转换。

真正的路径转换是在项目根目录下面的vite.config.js文件中配置的，如下：