React项目执行npm run dev后localhost:5173报404问题求助

执行npm run dev启动React项目后，localhost:5173端口返回404错误，所有路由（包括根路径/）均无法显示预期JSX内容，终端及浏览器控制台无任何提示信息。

已尝试以下方案但均无效：

• 在防火墙中放行5173端口；
• 配置OpenSSL证书并修改环境变量路径。

后端服务运行正常，执行node app.js后，localhost:3000端口可正常显示“Welcome to the home page!”。暂不考虑前后端联调问题，当前核心问题为前端项目启动后404无法访问。

项目相关信息 #

文件结构 #

• 前端文件结构
• 后端文件结构

package.json依赖配置 #

• 启动脚本配置
• 其他依赖配置

关键代码文件 #

src/main.jsx

// src/main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme"; // 确保路径正确
import "./App.css";

// React 18+ 创建根节点
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <Router>
        <App />
      </Router>
    </ThemeProvider>
  </React.StrictMode>
);

src/App.jsx

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme";
import Login from "./components/Login";
import Register from "./components/Register";
import Dashboard from "./components/Dashboard";
import Navbar from "./components/Navbar";
import jwt_decode from "jwt-decode";
import "./App.css"; // 修正路径
import Profile from "./Profile";
import Tasks from "./Tasks";
import Auth from "./Auth";
import { API_URL, TOKEN_KEY } from "./constants";
import axios from "axios";

function App() {
  const [token, setToken] = useState(localStorage.getItem(TOKEN_KEY) || null);
  const [userId, setUserId] = useState(null);

  useEffect(() => {
    if (token) {
      const decoded = jwt_decode(token);
      setUserId(decoded.id);
    }
  }, [token]);

  useEffect(() => {
    // DOM完全加载后执行的代码
    console.log("DOM complètement chargé");
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`${API_URL}/endpoint`);
        console.log(response.data);
      } catch (error) {
        console.error("Erreur lors de la récupération des données :", error);
      }
    };

    fetchData();
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <Router>
        <Navbar />
        <div className="container">
          <header className="header">Défis Informatique</header>
          <Routes>
            {!token ? (
              <>
                <Route
                  path="/login"
                  element={<Login setToken={setToken} setUserId={setUserId} />}
                />
                <Route
                  path="/register"
                  element={
                    <Register setToken={setToken} setUserId={setUserId} />
                  }
                />
              </>
            ) : (
              <>
                <Route
                  path="/"
                  element={<Dashboard token={token} userId={userId} />}
                />
                <Route path="/profile" element={<Profile userId={userId} />} />
                <Route path="/tasks" element={<Tasks userId={userId} />} />
                <Route path="/auth" element={<Auth token={token} />} />
              </>
            )}
          </Routes>
        </div>
      </Router>
    </ThemeProvider>
  );
}

export default App;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <link rel="stylesheet" href="/src/App.css">
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>

vite.config.js

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

export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
    port: 5173,
  },
});

后端app.js

const express = require("express");
const app = express();
const userRoutes = require("./routes/users");
const taskRoutes = require("./routes/tasks");
const fs = require("fs");
const https = require("https");

app.use(express.json());

// 用户和任务路由
app.use("/api/users", userRoutes);
app.use("/api/tasks", taskRoutes);

// 根路径路由
app.get("/", (req, res) => {
  res.send("Bienvenue sur la page d'accueil !");
});

// 启动HTTP服务器
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Serveur démarré sur le port ${PORT}`);
});

// 证书和私钥文件路径
const pathToPrivateKey =
  "D:/Documents/Téléchargements/OpenSSL-Win64/bin/private.key";
const pathToCertificate =
  "D:/Documents/Téléchargements/OpenSSL-Win64/bin/certificate.crt";

// 检查文件是否存在
if (fs.existsSync(pathToPrivateKey) && fs.existsSync(pathToCertificate)) {
  const privateKey = fs.readFileSync(pathToPrivateKey, "utf8");
  const certificate = fs.readFileSync(pathToCertificate, "utf8");
  const credentials = { key: privateKey, cert: certificate };

  // 创建HTTPS服务器
  const httpsServer = https.createServer(credentials, app);

  // 在安全端口启动服务器（443或其他）
  httpsServer.listen(443, () => {
    console.log("HTTPS Server running on port 443");
  });
} else {
  console.error(
    "Les fichiers de certificat ou de clé privée sont introuvables."
  );
}

内容的提问来源于stack exchange，提问作者Olivier Duboille