node.js - Express 没有为 React 构建正确提供静态文件

标签 node.js reactjs express static

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

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

我的文件被构建到一个 build 文件夹中,该文件夹是我的 server.js 文件的同级文件。 我的网站(根) -src (f) -构建(f) -server.js -公共(public)(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>

如果您看到我没有看到的东西,请告诉我。我在兜圈子。提前致谢!

最佳答案

您还可以将目录合并为:

// 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'));
});

关于node.js - Express 没有为 React 构建正确提供静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47935828/

相关文章:

node.js - 缺少架构错误 : Schema hasn't been registered for model "Users" when populate

javascript - redux 存储的最大内存大小是多少?

javascript - 实现 serviceworker 时响应意外 token 'export'

reactjs - React – 将表单元素状态传递给兄弟/父元素的正确方法?

javascript - 为什么我的 Node 应用程序在此 POST 请求中返回 404?

node.js - 如何在 NodeJs 中运行 SOAP 请求?

node.js - jade 模板条件类 nodejs expressjs

html - 没有浏览器可以做webrtc吗?

node.js - 为什么 npm 在 npm install 后运行 prepare script,我该如何停止它?

node.js - 无法使用 SaSS 和 Express 选项