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/')
            }]
          },
相关推荐
jingfeng5141 分钟前
C++ STL-string类底层实现
前端·c++·算法
cyforkk34 分钟前
Hexo 双分支部署指南:从原理到 Netlify 实战
前端
小小愿望37 分钟前
前端读取与导出XLSX文件实战指南(React+Ant Design)
前端
小小愿望1 小时前
JavaScript生成随机数的全面指南:别再只会用Math.random()了!
前端
用户847181054191 小时前
wps加载项ribbon.js 与 ribbon.xml 的交互
前端
Jackson__1 小时前
RAG究竟是什么?一文搞懂大模型的记忆增强术
前端
雲墨款哥1 小时前
JS算法练习-Day10-判断单调数列
前端·javascript·算法
前端市界1 小时前
前端视角: PyQt6+Vue3 跨界开发实战
前端·qt·pyqt
阅文作家助手开发团队_山神1 小时前
第四章:Flutter自定义Engine本地依赖与打包流程
前端·flutter
JuneXcy1 小时前
11.web api 2
前端·javascript·html