react+vite+ts关于路径别名的配置

最新推荐文章于 2025-03-13 10:25:08 发布

二条学前端

最新推荐文章于 2025-03-13 10:25:08 发布

阅读量2k

点赞数 3

文章标签： react.js javascript 前端前端框架

本文链接：https://blog.youkuaiyun.com/Gunba1/article/details/128182898

版权

1.配置路径别名

第一步:找到vite.config.ts文件

第二步:引入path

第三步:写入下图红框代码

备注:本项目使用的是TS,因此需要下载安装关于node这个库的ts的声明配置

npm i -D @types/node

安装成功后，如果path还有报红，将引入path换成import * as from 'path

2.配置路径别名的提示

第一步:找到tsconfig.json文件

第二步:写入下图红框内的内容

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

二条学前端

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

react18 + vite5 + typeScript + commitLint + prettier + eslint + husky + lintStaged 实现后台管理系统基本框架

小白小白从不日别的博客

06-04

665

npm run eject：项目中的一些配置被隐藏起来了，通过这个命令可以将配置文件反编译到项目中，从而获得配置的权利，这个操作是不可逆的，一旦编译出来就无法编译回去，一般来说不会执行这个命令，我们会通过其他方式去修改配置。：React18 引入了并发模式，Zustand 设计为响应式的状态管理库，可以很好地兼容 React18 的并发特性，确保应用的状态管理在并发模式下仍然稳定和高效。：Zustand 采用了最小的 re-render 策略，只会在状态实际变化时触发组件重新渲染，避免了不必要的性能开销。

【React】vite + react 项目，配置项目路径别名 @

Eliaukoyx

03-28

3645

为了方便使用，希望使 @ 符号代表 src 文件路径，因此需要在项目中配置路径别名。下面介绍，如何在 vite + react 的项目中配置项目路径别名@

2 条评论您还未登录，请先登录后发表或查看评论

React + TypeScript+ Vite 配置路径别名和vscode智能路径提示

z284747的博客

02-17

410

在根目录下的 vite.config.ts 文件中配置如下代码，就可以使用路径别名了。此时可以正常启动项目，并正确使用路由了。但是还是会报警告，所以我们还需要配置 vscode 的智能路径提示配置。

react-ts vite配置路径别名无效问题

dflouw508的博客

03-13

将原本配置在tsconfig.config上的路径设置迁移到tsconfig.app.json。版本react19 vite6。

React + Vite项目别名配置

站在顶峰看星星

08-17

859

数组形式：Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>由上图我们发现，我们虽然配置了别名，但是vscode并没有给出提示，那就意味着别名没有生效。对象形式：Record<string, string>因此我们需要手动创建。

react+ts+vite配置路径别名

要胖的博客

02-28

849

vite+react配置路径别名配置VSCode智能提示

vite + react + ts 配置路径别名alias

Cang_Ye的博客

09-05

1990

path 模块是 node.js 的内置模块，而 node.js 默认不支持 ts 文件的，所以需要安装 @type/node 依赖包。的时候才不会提示是否安装你。根据需要进行配置路径别名。

vite+react+ts项目使用别名

weixin_42915060的博客

03-29

441

vite+react+ts项目使用别名

基于react+ts+vite的通用网站模板源码.zip

05-27

4. `vite.config.ts`：Vite的配置文件，用于自定义Vite的行为，如配置别名、调整输出目录等。 5. `.gitignore`：指定版本控制系统忽略的文件和目录。 6. `package.json`：项目依赖和脚本的配置文件，包含了项目...

Vite + React + tailwindcss + ts + 多Nodejs环境... 速搭

免费无法个性化定制

12-07

1533

vite + react + tailwindcss + ts

使用vite+react+ts+Ant Design开发后台管理项目（一）

lbking666666的专栏

09-19

2590

本文将引导开发者从零基础开始，运用。

react-vite-ts

04-05

这是一个vite2＆React17＆Typescript演示去做集成Redux ，或者使用封装过的约定式路由还记得吗，在Vite中，如果想按需加载，可以使用这个插件：，现在已经支持Vite 2了 less换成scss Production Mode ， SSR ，参照官网配置即可，遇到什么坑可以一起讨论

配置vite下react+ts的alias别名@/

m0_60622481的博客

10-10

483

配置vite下react+ts的alias别名@/

【Vue】vite + ts 配置别名

文艺倾年的博客

07-08

898

vite + ts 配置别名

vite创建的react+ts项目配置路径别名

hellobyebye12345的博客

01-07

323

可以看到main.ts中输入@/可以出来路径提示，导入后不会报红。这三个文件都加上下面这个配置。

vue3 vite ts 项目配置别名

pig_ning的博客

03-08

681

vue3 vite ts 项目配置别名

vite+ts设置别名

weixin_45705239的博客

06-06

433

安装 @types/node 避免代码爆红。

vite.config.ts配置别名、环境变量、svg图标配置

csdnmingzai的博客

09-02

592

"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src。1.2、TypeScript编译配置 tsconfig.json，在内部添加 baseUrl 与 paths。"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录。1.1、在 vite.config.ts 内部添加 path、resolve等代码。"paths": { // 路径映射，相对与 baseUrl。2.1、在项目根目录创建开发、生成和测试环境的文件。

React: 创建路径别名

weixin_44538672的博客

06-24

314

用Vite创建react项目命令：npm create vite@latest my-react-app --template react-s。这篇主要记录一下用Vite创建的React项目，如何配置路径别名@。路径别名的好处就是做路径简化，经过配置的@相当于src目录。大家可以试想一下，如果项目结构比较复杂，当想import一个指定组件的时候，路径别名的好处是不是就不言而喻了。是一种新型的前端构建工具，能够显著提升前端开发经验，大家可以浏览。

react+vite的别名如何使用

最新发布

03-25

在 React + Vite 的项目中，路径别名是一种方便的方式来简化文件导入路径。Vite 提供了 `alias` 配置选项，可以帮助我们设置自定义的路径别名。 ### 设置步骤 #### 1. 修改 `vite.config.js` 打开项目的配置文件 `vite.config.js` 或者 `vite.config.ts`（如果是 TypeScript），然后通过引入 `path` 模块来创建路径别名： ```javascript import { defineConfig } from 'vite'; import path from 'path'; // 引入node内置模块path import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), // 将 @ 替换为 src 路径 components: path.resolve(__dirname, './src/components'), utils: path.resolve(__dirname, './src/utils') } } }); ``` 这里我们将常用的根目录下的 `src` 文件夹映射到了 `@` 这一别名上，并且额外添加了针对组件和工具函数的别名示例。 #### 2. 使用别名完成上述配置之后，在React组件或者其他JS/TS文件里就可以直接利用该别名进行引用： ```jsx // 原始方式 import MyComponent from '../../components/MyComponent.jsx'; // 别名方式 (假设已将 components 映射到 ./src/components) import MyComponent from 'components/MyComponent.jsx'; // 另一种情况：使用 @ 表示 src 目录 import helperFunction from '@/utils/helperFunction'; ``` #### 注意事项： - 如果你是TypeScript项目，还需要编辑 tsconfig.json 来同步这些别名: ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "components/*": ["src/components/*"], "utils/*": ["src/utils/*"] } } } ``` 这样就能让Typescript理解新的路径规则并且提供智能提示功能。 ---