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

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

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

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

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

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

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

React+Vite+TS项目使用Alias路径别名不能点击跳转到指定文件_第3张图片
React+Vite+TS项目使用Alias路径别名不能点击跳转到指定文件_第4张图片

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

你可能感兴趣的:(JavaScript,react,webpack,typescript)