JS 和 CSS 请求提供 index.html

Question

我正在使用Express 和create-react-app。

我的 React 应用程序还不错，现在我正在尝试从 Express 服务器提供它。

// server/app.js

const express = require('express');
const path = require('path');

const app = express();

// Serve static assets

app.use(express.static(path.resolve(__dirname, '..', 'build')));

// serve main file

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});


module.exports = app;

（当我执行 npm run build 时，我的构建目录会被填充。

我在 Chrome 中查看该页面，在 localhost:3000 加载页面时会发生什么情况是控制台打印 Uncaught SyntaxError: Unexpected Token <，在 Sources 选项卡中它显示我的 CSS 和 JS 文件的内容与index.html：如图所示。

这似乎是一个可识别的问题，因此希望有人以前见过。我什至不知道从哪里开始，尤其是因为我实际上是从 Express 开始成功地为应用程序提供服务的。然后这种情况开始发生，然后在 git 分支的一些随机切换以及恢复和重放更改后停止，然后又开始发生。所以我什至不确定是什么让它发生或没有发生。

Answer 1

您的app.use(express.static... 调用似乎失败了，因此所有请求（包括静态资产）都由app.get('*', (req, res) => { 部分处理。

由于您打算使用它来为 React 应用程序提供服务，我建议您从样板文件中获取灵感，“看看它是如何完成的”。我个人使用 NYTimes 的 kyt 项目，也有 react-starter-kit。

Answer 2

尝试以下代码更改，详细信息来自express documentation - serving static files in express：

替换

app.use(express.static(path.resolve(__dirname, '..', 'build')));

有

app.use(express.static('build'))

删除

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

Answer 3

问题是"homepage": ... 中的package.json。

当npm run build 运行并且在 package.json 中有一个具有非空路径的主页 URL 时（就像这样的 Github Pages URL https://username.github.io/project_name，其中“/project_name”是路径），它会改变它期望/build 中的文件在哪里。对我的 js 和 css 的请求将发送到 /project_name/static/... 而不是 /static/...。

在npm run build的日志输出中竟然说：

The project was built assuming it is hosted at /project_name/.
You can control this with the homepage field in your package.json.

在我的本地主机上，它没有托管在 /project_name/，因此路径已关闭。