Viteconfig / jsconfig
内容提要
这篇文章介绍了如何使用Vite.config.js和jsconfig.json文件配置Vite项目的路径别名，以便开发者更方便地引用不同模块和组件。
延伸解读
两处配置需保持一致
文章同时给出了 Vite.config.js 和 jsconfig.json 的配置示例。前者让 Vite 在构建和开发时能解析别名，后者让编辑器获得路径提示与跳转能力。若只改其中一处，可能出现代码能运行但编辑器报错，或反之的情况。因此新增别名时，建议两个文件同步更新，避免路径解析与类型提示脱节。
别名粒度与目录结构的关系
示例中的别名并非只设一个 @，而是按 components、layouts、pages、router、service、utils、reducer 等目录分别定义。这种做法的好处是引用来源更直观，减少跨层引用时的路径长度。但它也要求目录结构相对稳定，一旦目录调整，Vite.config.js 与 jsconfig.json 中的对应映射都需要跟着修改。
注意示例中的路径差异
对比两份配置可以看到，部分别名指向并不完全一致。例如 @layouts 在 Vite.config.js 中指向 ./src/components/layouts，而 jsconfig.json 中 @layouts/* 同样指向该目录，但 @reducer 在两份配置里分别指向 ./src/reducer 与 ./src/components/reducer。实际使用时应以项目真实目录为准，避免直接照搬导致解析错误。
Q&A
如何在Vite项目中配置路径别名？
可以通过在Vite.config.js文件中使用alias属性来配置路径别名。
Vite.config.js文件中如何使用fileURLToPath？
在Vite.config.js中，fileURLToPath用于将URL转换为文件路径，以便设置别名。
jsconfig.json文件的作用是什么？
jsconfig.json文件用于配置TypeScript编译器的路径映射，帮助开发者更方便地引用模块。
在jsconfig.json中如何定义路径别名？
在jsconfig.json中，可以通过compilerOptions的paths属性定义多个路径别名。
Vite项目中常见的路径别名有哪些？
常见的路径别名包括@、@components、@layouts、@pages等，指向相应的文件夹。
使用路径别名有什么好处？
使用路径别名可以简化模块和组件的引用，提高代码的可读性和维护性。
