React + Vite项目别名配置

• Node版本：v20.16.0
• Vite版本：5.4.1

1. 安装 @types/node 依赖包

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

2. 配置 vite.config.js 文件:

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

   

3. 使用配置好的别名 @：
   

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

4. 解决方案：

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

   

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

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

   

5. 知识拓展：

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