Question

我一直试图弄清楚这几个小时，我的脑袋即将爆炸。我真的希望这不是我错过的一些愚蠢的细节......

我有一个服务器端渲染反应应用程序设置。一切都很顺利。我唯一的问题是我似乎无法加载css。

这是我的文件树（没有node_modules）：https://i.stack.imgur.com/xevUb.png'

我的server.js文件中有以下代码

app.use('static', express.static(__dirname + '/public'));
app.use('dist', express.static(__dirname + '/dist'));

app.get('*', (req, res) => {
      match({
          routes,
          location: req.url
        }, (error, redirectLocation, renderProps) => {
          if (error) {
            res.status(500).send(error.message)
          } else if (redirectLocation) {
            res.redirect(302, redirectLocation.pathname + redirectLocation.search)
          } else if (renderProps) {
            var html = renderToString( < RouterContext { ...renderProps
              }
              />);
              res.status(200).send(template({
                body: html
              }));
            }
            else {
              res.status(400).send('Not found.')
            }
          });
      });

这是我的template.js文件：

export default ({ body }) => {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <title>test</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="/static/css/style.css" />
      </head>

      <body>
        <div id="root">${body}</div>
      </body>

      <script src="dist/client.js"></script>
    </html>
  `;
};

当我进入本地服务器时。我得到了html，并且引导样式应用于它。但是，我在template.js文件中链接的style.css和client.js出现了400错误的请求错误。

我真的希望有人可以帮我解决这个问题......

修改

以下是我在开发者控制台上看到的内容：

Answer 1

您的server.js文件似乎位于dist文件夹中，这意味着__dirname将./dist而不是./，就像您的代码似乎是书面。你需要做的是这样的事情：

const path = require('path')
const projectRoot = path.resolve(__dirname, '../')
app.use('static', express.static(projectRoot + '/public'))
app.use('dist', express.static(__dirname))

Express静态css没有服务

1 个答案: