我正在使用 Vite 和 react-router dom 开发一个有两个页面的 webapp,在开发模式下一切正常。但是当我构建 de 应用程序时,唯一有效的页面是索引 (path="/") 我正在使用确切的属性。
它发生的原因是因为构建行为不同。当您在开发模式下运行应用程序时,这意味着您的应用程序现在正在服务器上运行(您的 PC 托管应用程序 - 一个节点 js 应用程序正在运行并且您的应用程序正在其上运行)。
构建应用程序时,会生成“构建”目录,但不再运行任何服务器。所以要么创建一个“托管”应用程序的服务器,要么不使用 react-router-dom(你可以尝试自己实现)
现在,当您使用 react-router 时,理想情况下您希望将所有请求路由到 build/index.html。因此,您可以构建一个代理服务器来为您的 index.html 和静态文件提供服务,如下所示(使用 Express.js):
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'build')));
app.use('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build/index.html'));
});
app.listen(process.env.PORT || 3000, () => console.log(`Running on PORT ${process.env.PORT || 3000}`));
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句