2

我有一个使用 CRA 和默认配置构建的反应应用程序。我想制作 SSR，所以我关注了一篇与此类似的文章https://www.vairix.com/tech-blog/server-side-rendering-ssr-of-create-react-app-cra-app-in -2020

接下来，我想内联 JS 和 CSS，以便我可以点击 URL 并复制生成的 HTML 页面，然后在我想要的任何地方使用它。

为此，我使用了 react-app-rewired 插件，现在我可以看到带有内联 CSS 和 JS 的 HTML。

问题是当我复制生成的 HTML 并将其另存为 .html 时，当我打开页面时，它返回 404 错误。

我正在尝试复制生成的 HTML，然后在完全不同的应用程序中将它们用作单独的组件。

我错过了什么吗？

重新连接反应应用程序的 config-overrides.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;

module.exports = {
  webpack: function(config, env) {
    if (env === "production") {
      config.plugins.push(new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]));
      config.plugins.push(new HTMLInlineCSSWebpackPlugin());
    }
    return config;
  }
};

用于 SSR 的 server.js

import express from "express";
import path from "path";
import renderer from "./react-renderer";

const app = express();
const PORT = 8000;

const routes = ["/custom1/:id","/custom2/:id","/custom3/:id"];

app.get("/*", renderer(routes));

app.use(express.static(path.resolve(__dirname, "../build")));
app.use(express.static(path.resolve(__dirname, "../public")));

app.listen(PORT, () => {
  console.log(`App running in the port ${PORT}`);
});
4

1 回答 1

1

404 是未找到的 HTTP 代码：我认为问题不在于打开页面，而在于找到它。

您在服务器中添加的第一条路由似乎正在捕获所有请求：

app.get("/*", renderer(routes));

您可以尝试将其作为最后一条路线移动

app.use(express.static(path.resolve(__dirname, "../build")));
app.use(express.static(path.resolve(__dirname, "../public")));

app.get("/*", renderer(routes));

不仅如此，您还没有说在哪里复制了结果页面，我希望在目录中../build或../public目录中，否则我不会感到惊讶您无法获取它。

于 2020-07-20T12:31:39.473 回答