Express 没有正确地为反应构建提供静态文件答案

【问题标题】：Express not serving static files correctly for react buildExpress 没有正确地为反应构建提供静态文件
【发布时间】：2018-06-04 18:32:11
【问题描述】：

我是新来的反应。我一直在尝试将我的 MEAN 堆栈应用程序转换为 express 和 reactjs 应用程序，但我在正确输入构建文件时遇到了问题。看起来我的服务器正在加载我的 index.html 文件来代替我的 js 文件。谁能帮我弄清楚为什么？

我在浏览器的 main.js 中出现以下错误：Uncaught SyntaxError: Unexpected token <

我的文件被构建到一个 build 文件夹中，该文件夹是我的 server.js 文件的同级文件夹。我的网站（根） -src (f) -构建（f） -server.js -公共（f）

这是我的 server.js

require('./server/config/config');

// Get dependencies
const express = require('express');
const morgan = require('morgan');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');

const api = require('./server/routes/api');

const compression = require('compression')
const app = express();

app.use(compression());

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url 
HTTP/:http-version" :status :res[content-length] :response-time ms'));

// Serve static assets
app.use(express.static(path.join(__dirname, 'build')));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/api', api);

app.get('/robots.txt', function (req, res) {
    res.type('text/plain');
    res.send("User-agent: *\nDisallow: /");
});

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

const port = process.env.PORT || '3001';
app.set('port', port);

const server = http.createServer(app);

server.listen(port, () => console.log(`API running on 
localhost:${port}`));
module.exports = app;

这是生成的 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-
    fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/brookeclonts/brookeclonts.com/manifest.json">
    <link rel="shortcut 
    icon" href="/brookeclonts/brookeclonts.com/favicon.ico">
    <title>React App
    </title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="/brookeclonts/brookeclonts.com/static/js/main.9ffbadeb.js">
    </script>
</body>

</html>

如果你看到了我没看到的东西，请告诉我。我在兜圈子。提前致谢！

【问题讨论】：

向我们展示 index.html
我加了！让我知道你是否还想要其他东西。 @EricGuan

标签： node.js reactjs express static

【解决方案1】：

您还可以将目录合并为：

// Serve static assets

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

// Always return the main index.html

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

【讨论】：

是的，这也不起作用。对不起：/它仍然给我同样的错误。
您能否分享您遇到的错误。
这是错误：Uncaught SyntaxError: Unexpected token < 在浏览器中加载应用程序时。

【解决方案2】：

这里发布的内容接近答案。谢谢大家的帮助！我真正的问题是我忘记了 .htaccess 文件。请参阅：https://github.com/facebook/create-react-app/issues/1171 和 https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

【讨论】：