React + Vite项目别名配置

  • Node版本:v20.16.0
  • Vite版本:5.4.1
  1. 安装 @types/node 依赖包

    js 复制代码
    pnpm i @types/node -D
    pnpm ls @types/node
  2. 配置 vite.config.js 文件:

    js 复制代码
    resolve: {
      alias: {
        "@": join(__dirname, "./src/"),
      },
    },
  3. 使用配置好的别名 @

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

  4. 解决方案:

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

    js 复制代码
    {
      "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>

        js 复制代码
        resolve: {
            alias: {
              '@': join(__dirname, '/src/')
            }
          },
      2. 数组形式:Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

        js 复制代码
        resolve: {
            alias: [{
              find: '@',
              replacement: join(__dirname, '/src/')
            }]
          },
相关推荐
RainbowSea21 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴27 分钟前
笨方法学python -练习14
java·前端·python
Mintopia34 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia44 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo2 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang2 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务