typescript + vite 项目如何配置别名

最新推荐文章于 2025-06-05 14:05:31 发布

acgCode

最新推荐文章于 2025-06-05 14:05:31 发布

阅读量7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： # typescript 前端 # Vue 文章标签： typescript 前端 javascript

本文链接：https://blog.csdn.net/sayUonly/article/details/123009045

前端同时被 3 个专栏收录

44 篇文章

订阅专栏

Vue

11 篇文章

订阅专栏

typescript

6 篇文章

订阅专栏

本文档介绍了在 TypeScript 项目中配置 Vite 和 tsconfig.json 的路径别名时遇到的导入路径不能以.ts扩展名结束的错误，以及项目无法运行的问题。通过在vite.config.js中设置`extensions`数组，并在tsconfig.json中添加`baseUrl`和`paths`配置，成功解决了这些问题，使得可以使用路径别名进行导入而无需显式指定扩展名。

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

我们为了省略冗长的路径，经常喜欢配置路径别名。但是在typescript下会遇到一些坑，比如导入路径不能以“.ts”扩展名结束，路径不识别等。下面我记录了我的处理方法。

vite.config.js：

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 配置别名
    }
  }
})

配置完之后，就可以在ide中使用别名了。但是这个时候我发现，路径下面报错了，hover上去后提示的错误是：导入路径不能以“.ts”扩展名结束。

既然不允许用扩展名，那么我省略扩展名好了。

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  }
})

这样，扩展名就不需要写了。

但是，项目无法运行了，报错显示：找不到这个文件。

那就是编译出问题了，于是我调整了 tsconfig.json，添加如下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"] // 相对位置需要配置baseUrl才能识别，否则会报错
    }
  }
}