刷新后除索引页面外无法获取正确的静态文件

Question

当我在索引路由（/）和登录页面（/login）上刷新页面时，它工作正常。

但是，当我在其他路线上刷新时，我的网站会出错，例如/user/123456。

因为无论请求是什么，浏览器总是获取HTML文件 因此，main.css和main.js中的内容都是HTML，浏览器错误。

我已经阅读了create-react-app的自述文件 无论我使用serve包（$serve -s build -p 80）还是表达，都会产生奇怪的错误。

以下是我的服务器代码：

//server.js
const express = require('express');
const path = require('path');
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const PORT = process.env.PORT || 80;
app.listen(PORT, () => {
  console.log(`Production Express server running at localhost:${PORT}`);
});

编辑：我已经找到导致问题的原因 我创建了一个新项目，并将其与我的相比较。新项目中静态文件的路径是绝对，但在我的项目中是 relative 。
因此，我删除了"homepage": "."中的package.json。

//package.json
{ ....
  dependencies:{....},
  ....,
- "homepage": "."
}

现在一切正常。我怎么不小心......

Answer 1

我已经找到导致问题的原因。 我创建了一个新项目，并将其与我的相比较。新项目中静态文件的路径是绝对，但在我的项目中是 relative 。 因此，我删除了 package.json 中的"homepage": "."。

//package.json
{ ....
 dependencies:{....},
 ....,
- "homepage": "."
}

现在一切正常。我怎么不小心......

Answer 2

如果您的路由/user/**在app.get('/*', ...后定义，则可能不匹配，因为/*获取所有请求并返回index.html。 尝试不使用*或在之前声明其他路线。

Answer 3

首先，我以为你误解了服务器部分。在您的情况下，您使用serve作为您的服务器。这是[serve]提供的静态服务器。如果您想使用自己的server.js，则应运行node server.js或node server。

我也和你做了同样的事情，没有这个问题。以下是我的所作所为：

1. create-react-app my-app
2. npm run build
3. sudo serve -s build -p 80（sudo表示1024以下的端口）

我得到了结果：

/user/321

我猜你可能会忘记构建脚本。您可以尝试以下方法：

1. 删除build/文件夹
2. 再次运行npm run build

建议：如果你想专注于前端，你可以使用[serve]。您可以轻松地专注于您需要的东西。