React+Vite+TS项目使用Alias路径别名不能点击跳转到指定文件

用 Vite 搭建一个React+TypeScript项目,文件导入模块由于有些层级过深,那么不得不在webpack配置文件里配置路径别名,减少路径代码,如下图

问题引入:但是在导入模块时,虽然配置好了别名代码基础路径,但是却丢失了ctrl+鼠标左键的一键跳转模块的功能,而且ts提示没有模块声明文件。如下图

原因是ts不能通过路径识别到对应的模块,但webpack已配置好,不影响编译,但是缺少跳转实在是难受。

解决方案: 将webpack里配置好的路径映射关系加入到TS的配置文件tsconfig.json的拓展里,这里我们将路径映射提为单独json配置文件paths.json, 再添加到ts的配置中,如下图

最后,重新启动项目,如果不生效,就重新启动下编辑工具。

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理解新的路径规则并且提供智能提示功能。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值