vite和ts 别名配置,生效范围

Question

最开始在vite.config.js中配置了resolve.alias,但是组件页面使用并不生效,后面在tsconfig.json中也进行配置后解决:

设想是否在tsconfig.json中配置就行?结果不行,路由文件中的@无法识别,所以,这两文件设置别名作用范围是怎么样的

Answer 1

vite.config.js 里的是给 Rollup 看的，实际是 @rollup/plugin-alias 这个插件的配置项，用于 Rollup 构建时模块化查找路径。

tsconfig.json 里的是给 tsc 看的，用于 TypeScript 构建时模块化查找路径。

至于二者为什么会分开，其实就是解耦的缘故。比如你可能压根不用 TS 去开发、只是单纯的 JS；而 tsconfig.json 也不会去考虑你是不是用的 vite。二者在这点上是没有耦合的。

Answer 2

大多数场景下，可以这样简单理解：编辑器中ts的校验提示，是用tsconfig中的配置；和项目的打包编译相关的，是用vite.config。