tsconfig 的路径映射和 vite config 的 resolve.alias 有什么区别？

tsconfig的paths选项和vite.config.js的resolve.alias选项主要目的是相似的，即它们都能指定别名路径，使得你能从任何代码文件中，通过简短、易记和绝对的路径来引入其他模块。

但两者还是有以下主要差异：

1. 适用环境：
   • tsconfig.json的baseUrl和paths配置主要应用于 Typescript 编译环境，帮助 Typescript 转译器理解模块路径别名。
   • vite.config.js的resolve.alias配置被 Vite 用来在 javascript bundling 阶段（或开发服务器中）处理模块路径别名。
2. 关于运行时：
   • Typescript 只是 javascript 的一个超集，所以它会被编译成纯 javascript 以在浏览器或 Node.js 中运行。在这个过程中，Typescript 编译器并不会去解析paths配置中的别名路径，这会导致运行时可能出现“找不到模块”之类的错误。为解决这个问题，我们在打包时应使用vite config.js或 webpack 等工具的别名路径配置。
   • 然而，vite.config.js的resolve.alias在完整构建阶段将别名路径解析成实际路径，因此不存在这个问题。 你可以看到运行时浏览器或 Node.js 能够准确找到模块。

所以，总结一下，tsconfig的paths用在编译阶段，帮助 TypeScript 理解模块别名路径；而vite.config.js的resolve.alias用在打包阶段，转化和解析别名路径以确保在运行时可以正确找到模块。

一般情况下，你需要在你的项目中同时配置tsconfig.json中的paths选项和vite.config.js（或其他 bundler 如 webpack）中的alias选项，两者是需要结合使用的。
这可以确保你在编码时获得正确的类型检查和自动补全能力（由tsconfig.json中的paths提供），同时在运行时能正确找到和加载模块（由vite.config.js中的alias提供）。