Question

我已经阅读了几篇有关如何使用express通过create-react-app提供静态文件的文章。我已经尝试了一切。有人可以帮我吗？

这是我的结构的样子

将其部署到Heroku时，出现以下错误：main.ac4887ed.js:1 Uncaught SyntaxError: Unexpected token <

为什么会这样？我已经尝试了几个小时。.也许我错过了什么？

这是我在server.js文件中拥有的代码：

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("../build"));

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

我在公用文件夹中的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="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/quiz.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>QuizGame</title>
 </head>
  <body>
    <div id="root"></div>
  </body>
</html>

当我尝试进入页面时，Heroku日志的输出如下所示：

我做错什么了吗？

这是我的构建文件夹中的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="/manifest.json"><link rel="shortcut icon" href="/quiz.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><title>QuizGame</title></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.ac4887ed.js"></script></body></html>

这是我的package.json文件，用于显示依赖关系，是否需要任何依赖关系才能使其正常工作？

"dependencies": {
"axios": "^0.17.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"connect-mongo": "^2.0.1",
"express": "^4.16.2",
"express-session": "^1.15.6",
"immutable": "^3.8.2",
"jsonwebtoken": "^8.3.0",
"lodash": "^4.17.4",
"moment": "^2.19.2",
"mongoose": "^5.0.2",
"morgan": "^1.9.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"passport.socketio": "^3.7.0",
"react": "^16.1.1",
"react-bootstrap": "^0.32.4",
"react-countdown-now": "^1.3.0",
"react-dom": "^16.1.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.7",
"react-scripts": "1.0.17",
"redux": "^4.0.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"ws": "^6.1.0"
},

Answer 1

我知道了：

在我的server.js文件中，我更改为：

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use('/', express.static("build"));

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

感谢所有帮助！

Answer 2

我有一个带有create-react-app的已部署应用程序。这是我的设置与您可以测试的设置之间的一些差异：

    if ( process.env.MODE !== 'development')
        app.use( express.static( `${__dirname}/../build` ) );

    if ( process.env.MODE !== 'development') {
        app.get('*', (req, res)=>{
            res.sendFile(path.join(__dirname, '../build/index.html')); 
        });
    }

我同时使用绝对路径作为静态路径和get端点
这些块是分开的，我将静态中间件放置在所有其他中间件之前，并将get *端点放置在服务器文件的最底部。仅app.listen（）在其下方。
您还将注意到我使用的是path.join而不是path.resolve，并将一个唯一的参数附加到__dirname

确保执行npm run build并在完成后重新启动服务器。

Answer 3

const express = require("express");
const app = express();
var path = require("path");
var jsonServer = require("json-server");
app.use(express.static("files"));
app.post("/mm", (req, res) => {
    res.sendFile(express.static(path.join(__dirname, "/files/hey.`enter code here`html")));
});
app.use("/api", jsonServer.router("./db.json"));
app.listen(9924, () => {
    console.log("hello");
});

使用Express提供静态文件时出现问题

3 个答案: