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/')
            }]
          },
相关推荐
渣哥4 分钟前
Spring 创建 Bean 的多种方式对比与最佳实践
前端·javascript·面试
Copper peas8 分钟前
axios使用过程
前端·javascript·vue.js
云鹤_14 分钟前
【Amis源码阅读】如何将json配置渲染成页面?
前端·低代码
逛逛GitHub17 分钟前
飞书多维表格 + 即梦 4.0,打造你的 AI 生图游乐场。
前端·github
行走在顶尖21 分钟前
Vue3 基础笔记
前端
guoss26 分钟前
实现渐变背景叠加渐变圆角边框
前端
枫,为落叶29 分钟前
【vue】导出excel
前端·vue.js·excel
转转技术团队30 分钟前
当 AI 走进前端开发:代理插件的全流程开发实践
前端·javascript·ai编程
慧一居士32 分钟前
Quill 富文本编辑器 功能介绍,使用场景说明,使用示例演示
前端
FinClip33 分钟前
100%关税与软件封锁下,信创为何是破局关键?
前端