vite和ts项目如何配置@的别名。千万别踩坑！！！

哈喽哈喽，我是你们的金樽清酒。最近不是在吹牛逼吗。毕设想做一个全栈项目。后端nestjs还在努力学习。什么IOC，AOP之类的。然后吧我得赶在三月份之前完成，因为马上要春招啦。哎，那项目就得早点搭建前端项目框架。我就选择了vite+ts的项目。也就有了这篇踩坑的文章。

为什么要配置@别名

在使用 Vite 和 TypeScript 开发项目时，配置路径别名（如 @src）是一种常见的做法。这不仅可以简化模块导入路径，提高代码的可读性和可维护性，还可以避免因为目录结构调整导致的路径问题。下面我将从多个角度详细解释为什么在 Vite 和 TypeScript 中配置路径别名是必要的。

这是ai给出的总结。我们来看一下实际的例子

在src下的assets里面有我需要导入的1.png和2.png。右边代码里面两种路径的写法。一种是../../assets/1.png,一种是@/assets/2.png。你觉得哪种方式更简洁一点。又或者文件路径一变，又多了一层文件夹，那不是第一种方式导入更长了吗。其他，@代表src我能看到文件从哪里导入的，更加的直观好维护。

so，那我们的目的就是要让自己@代表src文件夹，以便后续的开发。

如何配置

一般来说，需要在vite.config.ts文件夹里面配置 在里面加上这个配置

resolve: {
    alias: {
    '@': path.resolve(__dirname, 'src'),
    },
},

不过呢，在此之前我们需要从node当中导入path模块

那这样就解决了嘛。就这么简单，嘿嘿，没完呢，谁叫你用的ts。我这里是安装了依赖没有报错。如果你没有安装依赖，path路径的导入是有问题的，因为node模块在ts中默认不支持类型声明。

那我们就安装依赖呗。

那就这样就完了嘛。完了嘛，我也希望就这样就完了，就不用我折腾那么久了。

还不够，还需要配置tsconfig.json添加baseUrl和paths，才能正确的解析路径。

没错就是加上上面这一段。

    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
        "@/pages": ["src/pages"]
        }
    },

按道理来说这样就结束了吧。但是呢，我配置的别名依旧没有用，我输入@没有给我提示一些可选项。

正常来说应该是这样的结果

给你提示它的下一级路径有啥，供我们选择。我当时拉了别人的项目，发现它在tsconfig.node.ts里面页配置了。

在那个里面我也配置了baUrl和path。

但是呢，依旧没有用，我的天，太难了。我就在找我的配置跟他的配置有什么不一样。omg，我比他多了一个tsconfig.app.json。随后我在这个文件里面也配置了一遍baseURl和paths。然后完成了配置。

为什么要同时设置tsconsfig.app.json和tsconfig.node.json

解答这个问题之前，先看一下我的tsconfig.ts的配置。

可以看到reference里面有两个文件的路径。

哦哦哦，reference是构建有多个tsconfig文件组成的项目结构的。也就是把多个tsconfig组合在一起。当ts项目很大的时候，我们就要进行拆分。

这两个文件是创建项目的时候自带的，有啥说法吗？有的兄弟，有的，像这样的说法还真有一个。 tsconfig.app.json通常用于客户端（浏览器端）的应用代码。这个文件包含与前端应用相关的 TypeScript 配置

像这样分两文件，每个文件都可以进行单独的配置，编译什么，不编译什么，选用哪种module。

就像，我没有配置tsconfig.app.json里面的baseUrl和paths我的@在前端编译器里面就没有用。不配置tsconfig.node.json的话vite运行的时候解析不了。ok，nice，总算是解决了。

总结

在使用 Vite 和 TypeScript 开发项目时，配置路径别名（如 @src）是一种常见的做法。这不仅可以简化模块导入路径，提高代码的可读性和可维护性，还可以避免因为目录结构调整导致的路径问题

通过使用多个 tsconfig 文件，可以更好地管理和分离不同环境的配置，确保每个环境都有适合其需求的编译和运行时设置。