React:使用ViteJS和TypeScript从根文件夹中获取绝对路径

Question

因此，在React中，使用vite，我试图实现以下结构，但似乎无法实现，因为我缺少一个概念或其他东西，因此结构如下：

src/utils
src/routes
src/index.tsx
src/main.tsx

在index.tsx上，我想导入utils和路由，然后在任何根级别调用它们，如下所示：import {Routes, Utils} from "@"，但我的方法不起作用。

同时，这是我用vite:配置它的方式

resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},

Answer 1

确保index.tsx从src/utils和src/routes:导出所有内容

// src/index.tsx
export * from './routes'
export * from './utils'

并为@:配置具有路径别名的TypeScript

// tsconfig.json
{
"compilerOptions": {
"paths": {
"@": ["./src"], // 👈 needed for barrel imports from '@'
"@/*": ["./src/*"]
}
}
}

演示