Npm run build/start 没有获取所有页面

Question

我在react/vite应用程序中有以下路线代码：

<Router>
   <Routes>
      <Route exact path="/" element={<LoginPage mensagemSucesso={mensagemSucesso} />} />
      <Route exact path="/criar-conta" element={<CriarConta onContaCriadaSucesso={(mensagem) => { handleRetornoSucesso(mensagem)}} />} />
      <Route exact path="/recuperar-senha" element={<RecuperarSenha onRecuperacaoSucesso={(mensagem) => { handleRetornoSucesso(mensagem)}} />} />
      <Route path="/redefinir-senha/:key" element={<RedefinirSenha onRedefinirSucesso={(mensagem) => { handleRetornoSucesso(mensagem)}} />} />
      <Route exact path="/principal" element={<AuthMiddleware><Principal /></AuthMiddleware>} />
   </Routes>
</Router>

所有这些页面都导入到文件的开头。当我运行 npm run dev 时，URL“localhost:5173/redefinir-senha/code”有效。但是当我运行 npm run start 时，相同的 URL 从前端获取 NOT FOUND 并且控制台出现消息 GET http://localhost:3000/redefinir-senha/code 404 (Not Found)。

在 package.json 中检查 npm run start 和 npm run dev：

"scripts": {
    "start": "vite build && serve dist",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  }

我是否错过了在 npm run start 中必须做的事情才能使其在生产环境中工作？

Answer 1

为了使节点理解动态工作的路由，例如 /redefinir-senha/123 和 /redefinir-senha/abc，我必须使用 npm installexpress 安装 Express，并在上创建一个 server.js 文件根文件夹包含以下代码：

const express = require('express');
const path = require('path');
const app = express();
const port = 8000;

// Servir arquivos estáticos da pasta 'build'
app.use(express.static(path.join(__dirname, 'dist')));

// Rotas para servir a aplicação React
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// Rota para lidar com as rotas React que contêm parâmetros dinâmicos
app.get('/redefinir-senha/:key', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// Lidar com todas as outras rotas, redirecionando para a página inicial
app.get('*', (req, res) => {
    res.redirect('/');
});

// Iniciar o servidor
app.listen(port, () => {
    console.log(`Servidor Express iniciado na porta ${port}`);
});

另外，在 package.json 文件中再添加一个脚本：

"server": "node server.js"

这样，服务器就可以工作并动态获取这些路由。否则， npm run build 仅获取静态存在的路由。例如，如果有一个指向 /redefinir-senha/123 的链接元素，该元素将正常工作，但如果我必须访问 /redefinir-senha/abc，则将找不到页面。