vite+ts配置tsconfig.json路径别名仍不生效的问题

已于 2023-12-01 01:20:15 修改
阅读量1.5k 收藏 7
点赞数 16
文章标签： 前端框架 typescript reactjs react
于 2023-12-01 01:19:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57319760/article/details/134725132
版权
作者在使用Vite配置项目时遇到别名不生效的问题，发现这与tsconfig的moduleResolution默认值有关。解决办法是将moduleResolution设置为node，以确保VSCode正确识别路径别名。这是一个关于Vite开发者的实际问题和解决步骤的案例。
摘要由CSDN通过智能技术生成

问题

最近在用vite从头配置项目的时候发现了配置别名不生效的问题，于是开始在全文搜索相关资料。

发现没有一篇资料回答到了重点，似乎都在说配置tsconfig的baseUrl和paths后就万事大吉了。

于是我浪费了两个小时，开始到处找资料，并没有什么用，开始翻以前写的代码，对比tsconfig后发现了个问题，最近用vite创建的项目它的tsconfig里面的moduleResolution默认的是最新ts5.0的bundler，然而这样会导致vscode识别不出来路径别名。

解决方法

把moduleResolution改成node就可以了，真的又是一次血泪经验

whitedove@doge
关注
vue3+vite+ts 配置别名@报错找不到模块
weixin_43754395的博客
11-30 3735
vue3+vite+ts配置别名@报错
vite+vue3配置eslint+prettier+ts
xiaodingdang222的博客
10-09 1680
eslint+ts+vite+prettier
tsconfig.json中设置“paths“: { “@/*“: [“src/*“] }不生效问题
weixin_70394181的博客
07-06 580
在写项目时配置别名时，在tsconfig.json配置路径提示不生效。配置文件,找到配置项 compilerOptions 添加配置,这是在tsconfig.json的配置，配置并不生效。在vite.config.ts中配置了别名。找到tsconfig.app.json。
使用vite构建的react-ts，路径别名配置提示无效
qq_68937887的博客
06-25 472
2.注意是在tsconfig.app.json中添加，不是tsconfig.json。
vite配置别名@无效
qq_45926577的博客
07-20 3863
第一次使用vite配置，遇到了一些问题，第一个小问题就是别名配置的问题。1. 首先引用path，然后写一下路径拼接函数。2、 在完成第一步之后发现@仍然没有效果。需要在tsconfig.json中配置。完成上面两部之后，就可以愉快使用@了。
tsconfig.json配置的路径别名，在使用ts-node运行时不生效
hello_xiuxiu的博客
07-08 1444
这是因为ts-node并不会去解析tsconfig.json，这是就需要额外下载一个包来解决这个问题。我们写纯ts项目也会配置路径别名，但是发现使用ts-node运行时，路径别名没起作用。最重要的一步的来了，把package,json的运行命令改了。很多项目都会配置路径别名来简化导入的路径长度。(其实是在哪里建，叫什么名字都行)在运行命令中加上require 参数。
vite + ts/typescript + vue3 配置别名 别名不生效问题
Jeason_KK的博客
02-06 4721
ite + ts/typescript + vue3 配置别名 别名不生效问题
vite创建vue3项目 解决配置@别名,vue文件不生效
最新发布
weixin_45689786的博客
09-02 329
【代码】vite创建vue3项目 解决配置@别名,vue文件不生效。
Storybook使用tsconfig中的别名配置
m0_37964621的博客
01-04 463
配置在tsconfig中的别名系统在storybook框架下无法生效。
Vite 3.x + Vue 3.x + TypeScript 4.x + Element Plus + Pinia 搭建项目
lhz_333的博客
08-17 1615
学习如逆水行舟，不进则退。
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1361
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
WebStorm运行 Ts+vue3+vite 配置代理不生效问题解决
weixin_43305545的博客
06-21 449
如果不删除vite.config.js文件，那就在package.json文件的：配置指定ts配置文件。查看项目目录是否多了个vite.config.js文件，把这个文件删了就可以了。
Vite 配置文件的别名设置
热门推荐
姜希成的博客
12-14 1万+
vite.config.js const {resolve} = require('path') export default { alias: { '/@/': resolve(__dirname, 'src') } } 使用： import HelloWorld from '/@/components/HelloWorld.vue' 修改配置文件要重启。
vite配置别名，并处理报错：找不到模块“xxx”或其相应的类型声明
weixin_53068161的博客
09-04 7594
vite配置别名，并处理报错：找不到模块“xxx”或其相应的类型声明
taro框架在tsconfig.json中设置“paths“: { “@/*“: [“src/*“] }不生效
weixin_45495316的博客
08-25 1016
要在config/index.ts中填写如下配置，@符就生效了。明明在tsconfig中配置了paths，@符仍旧不生效。发现taro的文章好少，记录一下。
【TS】【tsconfig.json】配置文件tsconfig.json中找不到任何输入
Waker的博客
12-13 1万+
tsc --init生成tsconfig.json后VScode报错 这是因为有了tsconfig.json后，VScode会自动在include和exclude包含的范围中查找ts文件，如果找不到ts文件就会报错，当在include和exclude范围中添加了ts文件，VScode就不会报错了 当前目录没有ts文件 当前目录添加ts文件后，VScode不报错 ...
vue打包后 修改 static config.js的后端地址无变化
不要和代码过不去
05-05 549
实际使用中只需要在index.html中引入即可。原因是在axios.js文件里面引入了。
changed tsconfig file detected: D:\project\v3\vite-demo\tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values. (x2)
07-14
这个消息表示检测到了tsconfig.json文件的更改，并且需要清除缓存并强制重新加载以确保TypeScript使用更新的配置值进行编译。这通常发生在你修改了tsconfig.json文件后，需要重新编译代码以使更改生效。 在这种情况下，你可以尝试以下步骤来解决问题： 1. 确保你的tsconfig.json文件已保存，并且更新了其中的配置值。 2. 检查一下是否有其他问题导致了这个警告消息的出现。例如，你可能有其他配置文件（如vite.config.js）与tsconfig.json文件发生冲突。 3. 尝试清除缓存并重新加载应用程序。你可以尝试关闭并重新启动开发服务器，或者执行一些特定于你的开发环境的命令来清除缓存并重新加载代码。 如果上述步骤无法解决问题，请提供更多的错误信息和相关的配置代码，以便更深入地排查问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值