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