Vite 和 TypeScript 处理模块和路径别名的方式略有不同,这就是为什么你可能需要在 tsconfig.json 中进行额外配置的原因。

Vite 中的路径别名

在 Vite 中配置路径别名主要用于客户端代码的模块解析。Vite 使用自己的解析策略,其中包括对 import.meta.url 的支持,这允许 Vite 在客户端构建时动态解析别名。当你在 vite.config.ts 中设置别名时:

// vite.config.ts
import { defineConfig } from 'vite';
import { fileURLToPath } from 'url';

export default defineConfig({
  resolve: {
    alias: {
     '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
  // ...其他配置
});

这告诉 Vite 在构建过程中,将 @ 别名解析为 src 目录的路径。

TypeScript 中的路径别名

TypeScript 也支持路径别名,但是它是基于其自己的解析系统。TypeScript 在编译阶段工作,而不是在浏览器中解析模块。因此,为了让 TypeScript 理解你在 Vite 配置中的别名,你需要在 tsconfig.json 中添加相应的配置:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
    // ...其他配置
  }
}

GitHub 加速计划 / vu / vue
86
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 4 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐