如何解决“[plugin:vite:import-analysis]无法解析从“pages\Group\index.tsx”导入“@layouts//Header”。该文件是否存在？”

Question

首先，请知道我英语不好 我要构建我的第一个项目。我用的是react + ts + Vite。 我想从其他路线添加 Head 组件，但我不能......

在 App.tsx 中，转到 /login 或其他路由工作正常，但在转到 /group 并调用标头的部分出现错误。

在此输入图片描述

在此输入图片描述

这些是我的代码。

vite.config.js

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import svgrPlugin from "vite-plugin-svgr";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), svgrPlugin(),tsconfigPaths()],
  server: {
    port: 3000,
  },
  resolve: {
  },
});

tsconfig.js

{
  "compilerOptions": {
    "esModuleInterop": true,
    "target": "ESNext",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "types": ["vite/client", "vite-plugin-svgr/client"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    },
    "resolveJsonModule": true,
    "jsx": "react",
    "strict": true,
    "moduleResolution": "node",
  },
  "include": ["src",]
}

应用程序.tsx

import { Routes ,Route,Navigate } from 'react-router-dom';
import loadable from "@loadable/component";


const LogIn=loadable(()=> import('@pages/Login'));
// const SignUp =loadable(()=> import('@pages/SignUp'));
const Group = loadable(()=>import('@pages/Group'));
const MyChat = loadable(()=>import('@pages/MyChat'));
const MyProfile = loadable(()=>import('@pages/MyProfile'));
const Private = loadable(()=>import('@pages/Private'));


function App() {
    console.log("APP");

  return (
    <Routes>
      <Route path="/" element={<Navigate to="/login" />} />
        <Route path = '/login' element={<LogIn/>}/>
        {/*<Route path = '/signUp' element={<SignUp/>}/>*/}
        <Route path = '/group' element={<Group/>}/>
        <Route path = '/mychat' element={<MyChat/>}/>
        <Route path = '/myprofile' element={<MyProfile/>}/>
        <Route path = '/private' element={<Private/>}/>
    </Routes>

  )
}

export default App

/布局/标题/index.tsx

import { FC } from "react";

const Header:FC =()=>{
  console.log("header!!")
    return(
        <h1>
            header!
        </h1>
    )
};


export default Header;

/pages/Group/index.tsx

import Header from "@layouts/Header";

const Group =()=>{

    return(
        <>
            <Header></Header>
            <h1>groupChat</h1>
        </>
    )
}

export default Group;

我已经检查过路线问题了。

Answer 1

在 vite 6 中，我无法让 tsconfigPaths 为我工作。

我确信有办法，但一旦我切换到这种格式，vscode 导入（通过 tsconfig）都可以工作，我的应用程序和 vitests 也可以工作。

在你的 vite.config.ts 中明确放置这样的路径

    export default defineConfig({
      test: {
        alias: {
            "@": resolve(__dirname, "./src"),
            "@components": resolve(__dirname, "./src/components"),
          //rest of your paths...
        }
      }
    })

并且在 tsconfig 文件中，您可能需要将路径更新为类似的路径，其中您有完整路径而不仅仅是子文件夹。假设

layout

是

src

的子文件夹。

{
    "compilerOptions": {
        //alias
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"],
            "@components/*": ["src/components/*"],
            ....ect
}

一旦我明确添加它们（如果你有的话，也在我的 vitest.config 中添加），然后我所有的 vscode 参考文献都像这样工作

import { example } from "@components";

也很想知道我对 tsconfigPaths 做错了什么。