关于Vite+ts构建项目,import引入文件路径标红找不到模块“xxxx”或其相应的类型声明问题解决

在vite+ts项目中,import引入文件标红问题,虽然不影响项目正常运行,但是这个红波浪看的非常难受,作为一名对自己严格要求的程序猿来说,这是不能容忍的。
在这里插入图片描述
查找了很多博客资料,找到了解决办法,记录一下。

  1. 首先在项目的 vite.config.ts 文件中,配置路径别名
import { defineConfig } from 'vite'
import path form 'path'

export default defineConfig({
  resolve: {
    //配置文件扩展名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    },
  },
})
  1. tsconfig.json 文件中同样需要添加路径配置
{
  "compilerOptions": {
  	"baseUrl": "./",
  	"paths": {
  	  "@": ["src"],
  	  "@/*": ["src/*"],
  	  "assets/*": ["src/assets/*"]
  	}
  }
}

两个文件配置好后,波浪线就消失啦~
在这里插入图片描述

情况二:引入路径时,写上 .ts 后缀报错,导入路径不能以".ts"扩展名结束,…

在这里插入图片描述
这个问题就很好解决了,把 .ts 后缀去掉即可。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hh_self

您的鼓励将是我原创最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值