这里有两个问题：

• 告诉typescript如何解析导入路径
• 告诉vite如何建立导入路径

你只告诉typescript如何解析，但vite不知道如何构建.所以参考官方文档resolve. alias，也许这就是你想要的：

// vite.config.ts
{
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],
  },
  // ...
}

您可以像这样导入路径（或./src下的任何模块）：

import Test from "@/components/Test";
import bar from "@/foo/bar"

• • 此外，您可以直接使用vite插件vite-tsconfig-paths，这样您就不必手动配置resolve.alias**

请遵循以下说明：
1.将vite-tsconfig-paths安装为开发依赖项
1.使用vite. config. ts模块注入vite-tsconfig-paths

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

我是通过搜索结果来到这里的，我在寻找一些不同的东西，即如何执行简单的绝对导入，如import { foo } from 'src/lib/foo.ts'
因此，如果您有一个包含所有代码的/src目录，并且希望使用绝对导入路径。
vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: path.resolve('src/'),
    },
  }
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./"
  }
}

请注意，这是一个技巧：src是一个别名，所以在Vite中路径看起来是绝对的。如果在根目录中有另一个目录，与/src相邻，则需要为该目录添加另一个别名。

@Yuns解决方案可以工作，但在vscode中显示错误。并且在vs代码中破坏了自动导入。
为了使它在vscode和vite中都能工作，我在tsconfig和vite. config中都添加了别名。

// tsconfig.json
{
  "paths": {
      "@/*": ["src/*"]
    }
  // ...
}

// vite.config.ts
{
  resolve: {
   alias: [{ find: '@', replacement: '/src' }],
  },
  // ...
}

然后，我可以像下面这样导入（苗条的应用程序在src目录）

import Header from '@/components/Header.svelte

寻找import {...} from "src/foo/bar";？

我也是通过用户Maciej Krawczyk的搜索结果来到这里的，但@部分也不是我感兴趣的。该用户的回答帮助了我，但我在path.resolve部分遇到了麻烦（ReferenceError，因为path没有定义），所以我使用了一种稍微不同的方法：

vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: "/src",
    },
  },
  ...
})

Vite的解析器将绝对路径/src视为服务器提供服务的位置（请参阅GH issue），因此，如果您从项目的根目录运行/building，并将src作为顶层目录（这很常见），则此别名将为Vite指明正确的方向。

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "src/*": [
        "./src/*"
      ]
    }
  }
}

这基本上是盲目地跟随this StackOverflow answer。TypeScript需要知道我们也有特殊的解析正在进行，否则TS会被你不存在的src包吓坏，不知道应该去哪里找。（注意：在我更改了TS配置后，VSCode没有立即接受更改，所以我仍然收到警告。我退出，重新打开，不得不等待约15秒的警告消失。

对于那些特别想在最新版本的Vite + React + TypeScript中添加像Vue一样的import "@/something-in-src"语法的人来说，我是这样做的：
Make sure @types/node is installed as a dev dependency。这不是最新版本的Vite附带的，它会使"path"和__dirname抛出一个未定义的错误。

维生素配置ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  },
  plugins: [react()],
});

系统配置json

增加：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

对于那些在所有必要的修改后仍然卡住的人，你需要重新加载vscode。我的配置文件：

• • 系统配置json**

"baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }

• • 维生素配置ts**

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: { '@': path.resolve(__dirname, './src') },
    },
    plugins: [react()],
});

在上面的代码中，您需要安装2个库：

• "路径"：npm i路径
• "@类型/节点"：* * npm i@类型/节点**

配置好你的项目文件后，你需要重新加载vscode。要做到这一点，请按ctrl + P并键入**"〉reload with extensions disabled"，之后你会看到弹出窗口来激活扩展，再次单击它，你的绝对路径就可以工作了
如果有人安装了vite-tsconfig-paths库，您还需要重新加载vscode，请记住将给定库导入到vite. config. ts**

export default defineConfig({ plugins: [react(), tsconfigPaths()] });

对于包，您将获得默认的"components/File"导入，而不是"@components/File "导入。