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/')
            }]
          },
相关推荐
墨渊君7 分钟前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu38 分钟前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z40 分钟前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行43 分钟前
Android 15边到边模式
前端
源猿人1 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾1 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工1 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
xw51 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 小时前
uni-app中v-if使用”异常”
前端·uni-app