vite+ts vscode无法识别别名路径

最新推荐文章于 2025-05-26 09:45:00 发布

原创最新推荐文章于 2025-05-26 09:45:00 发布 · 1.3w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #vue #vue.js #webpack #javascript

本文介绍了如何在Vite+TypeScript项目中配置别名，以及在VSCode中遇到模块找不到问题时，如何通过调整tsconfig.json配置来解决。重点讲解了在tsconfig.json中添加baseUrl和paths属性以映射别名路径的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vite+ts项目中，在vite.config.ts中配置了别名，在其他文件中使用别名，vscode会报错说找不到这个模块

vite.config.ts配置

// ...
resolve: {
    // 配置别名
    alias: {
      '@': path.join(__dirname, './src'),
      '@components': path.join(__dirname, './src/components'),
      '@utils': path.join(__dirname, './src/utils')
    }
  },
  // ...

在ts文件中使用 @utils

// 报错 can not find module ....
import utils from '@utils'

解决办法

配置 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],

	// ++ 这里加上baseUrl 和 path即可 ++
    "baseUrl": "./",
    "paths": {
	  // 根据别名配置相关路径
      "@utils/*": ["./src/utils/*"]
    }
    
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}