安装 @types/node 依赖包

pnpm i @types/node -D
pnpm ls @types/node

配置 vite.config.js 文件:

resolve: {
  alias: {
    "@": join(__dirname, "./src/"),
  },
},

使用配置好的别名 @：

由上图我们发现，我们虽然配置了别名，但是vscode并没有给出提示，那就意味着别名没有生效。

解决方案：
因为使用 Vite 创建的 React 项目，并没有生成 jsconfig.json 文件。因此我们需要手动创建 jsconfig.json 文件，添加如下配置：

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

此时，再导入组件使用@时，就会有提示了，如图：

知识拓展：

1. 配置别名，实际有两种写法：

   alias配置官方文档：https://cn.vitejs.dev/config/shared-options#resolve-alias

   1. 对象形式：Record<string, string>

      resolve: {
          alias: {
            '@': join(__dirname, '/src/')
          }
        },
      

   2. 数组形式：Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

      resolve: {
          alias: [{
            find: '@',
            replacement: join(__dirname, '/src/')
          }]
        },