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/')
            }]
          },
相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友4 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar4 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙7 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump7 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro8 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin8 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial