Vue/React/Svelte + Vite + TypeScript项目配置绝对路径的方法

我来帮你一步步搞定绝对路径的配置，其实没那么复杂，主要就是让Vite能解析这些别名，同时让TypeScript编辑器不报错，分两步走就行：

1. 配置Vite识别路径别名 #

首先打开项目根目录下的vite.config.ts，我们需要在这里添加别名映射，让Vite知道@或者@components这些符号对应到项目里的哪个文件夹。

先导入path模块的resolve方法，然后在defineConfig里配置resolve.alias：

import { defineConfig } from 'vite'
// 替换成你使用框架对应的插件：Vue用@vitejs/plugin-vue，React用@vitejs/plugin-react，Svelte用@sveltejs/vite-plugin-svelte
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()], // 这里替换成你的框架插件
  resolve: {
    alias: {
      // 核心：把@映射到项目根目录下的src文件夹
      '@': resolve(__dirname, 'src'),
      // 如果你想更细分，也可以单独配置组件、类型文件夹的别名
      '@components': resolve(__dirname, 'src/components'),
      '@types': resolve(__dirname, 'src/types')
    }
  }
})

注意：根据你用的框架，插件部分要对应替换——比如React项目就导入@vitejs/plugin-react，然后plugins: [react()]；Svelte项目导入@sveltejs/vite-plugin-svelte，plugins: [svelte()]。

2. 配置TypeScript让编辑器识别别名 #

光Vite能解析还不够，TypeScript编辑器（比如VS Code）会因为找不到别名对应的路径飘红，所以我们要在TS配置文件里同步这些别名。

打开项目里的tsconfig.json（如果你的项目主要用tsconfig.app.json，就改这个），在compilerOptions里添加baseUrl和paths配置：

{
  "compilerOptions": {
    // 保留你原来的其他配置，比如target、module这些
    "baseUrl": ".", // 基础路径设为当前配置文件所在的根目录
    "paths": {
      // 和Vite里的别名对应，@/*对应src下的所有文件
      "@/*": ["src/*"],
      // 如果你配置了细分的别名，这里也要同步
      "@components/*": ["src/components/*"],
      "@types/*": ["src/types/*"]
    }
  },
  // 确保include字段包含了src目录，让TS能扫描到所有源码文件
  "include": ["src/**/*", "vite.config.ts"]
}

最后一步：重启开发服务 #

配置完上面两个文件后，记得关掉当前的Vite开发服务，再重新启动npm run dev，新的配置才会生效。

现在你就可以像你想要的那样用绝对路径导入了：

import TodoList from '@components/TodoList'
import type { Todo } from "@/types/Todo"

内容来源于stack exchange