React + Vite项目别名配置

安装 @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/')}]},