npm run dev。端口 5173 上绝对没有显示任何内容 (http://www.localhost:5173)
它显示“错误 404”，而我的 jsx 应该显示
我的路线均未显示。不管是path=/还是其他
我尝试了几种解决方案都没有成功
我的后端服务器仍然可以工作。当我在终端上输入“node app.js”时，确实有“欢迎来到主页！”显示在端口 3000
另一方面，我不知道如何链接我的前端和后端。但这又是另一个问题。我的主要问题是，当我在终端中输入“npm run dev”并在网络浏览器上启动端口时，它给我“错误 404”
我首先认为这是因为我的防火墙不允许端口 5173。我试过了，还是不行
然后我认为它需要一个带有有效密钥的 openssl 证书。所以我下载了openssl，在我的代码中实现它并用路径修改了环境变量。没有成功
这是我的 React.js 应用程序中的文件结构：
这是我的 package.json 以及已安装的库：
这是我的 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"; // Assure-toi que ce chemin est correct
import "./App.css";
// Création du root pour React 18+
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<Router>
<App />
</Router>
</ThemeProvider>
</React.StrictMode>
);
这是我的 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"; // Correction du chemin
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(() => {
// Code à exécuter lorsque le DOM est complètement chargé
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，其中包含我的src/main.jsx和导入的src/App.css（我尝试了几种可能的路径）：
<!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());
// Routes pour les utilisateurs et les tâches
app.use("/api/users", userRoutes);
app.use("/api/tasks", taskRoutes);
// Route pour la racine
app.get("/", (req, res) => {
res.send("Bienvenue sur la page d'accueil !");
});
// Démarrer le serveur
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Serveur démarré sur le port ${PORT}`);
});
// Chemins vers les fichiers de certificat et de clé privée
const pathToPrivateKey =
"D:/Documents/Téléchargements/OpenSSL-Win64/bin/private.key";
const pathToCertificate =
"D:/Documents/Téléchargements/OpenSSL-Win64/bin/certificate.crt";
// Vérifiez si les fichiers existent
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 };
// Créer un serveur HTTPS
const httpsServer = https.createServer(credentials, app);
// Démarrer le serveur sur un port sécurisé (443 ou autre)
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."
);
}
我的问题是 localhost:5173 中没有显示任何内容（它给了我“错误 404”），并且控制台或终端中也没有显示任何内容