项目配置@别名路径，并让编辑器正确识别和提示。

前言

项目里配置别名路径是写项目时的常见操作。好处在于：

1. 简化模块路径。在项目中，有些文件可能存在于深层目录中，并且需要多次引用。如果每次都使用相对路径进行引用，就会显得非常麻烦。而通过在项目中配置 @ 别名路径，就可以将这些深层目录的路径简化为一个别名，在代码中更加清晰和简洁。

2. 提高重构效率。在项目中经常需要对文件进行重构，比如将某个组件从一个目录下移动到另一个目录下。如果没有使用别名路径进行引用，那么就需要在所有引用该组件的地方都进行路径修改，这是非常费时费力的。而若使用别名路径，则只需在别名路径的配置中修改即可。

3. 便于维护。在一个大型项目中，会存在很多共用的组件、工具类等资源，这些资源往往需要在不同的地方进行引用。如果不使用别名路径，就可能出现遗漏引用或者重复定义等问题。而使用别名路径可以避免这些问题，统一管理项目中的共用资源，在代码中也容易进行识别和维护。

配置

• Vite

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

• Webpack

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

编辑器识别

编辑器并不会自动识别别名，你也需要在项目中添加一个 jsconfig.json（或 tsconfig.json）文件，并在其中配置别名。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}