在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 后缀去掉即可。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐