快递静态 css 未送达

Question

几个小时以来，我一直在努力解决这个问题，我的脑袋快要爆炸了。我真的希望这不是我错过的一些愚蠢的小细节...

我有一个服务器端渲染 React 应用程序设置。一切顺利。我遇到的唯一问题是我似乎无法加载 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 并应用了 bootstrap 样式。但是，我的 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))

快递静态 css 未送达

Express static css not served

node.js

express

reactjs

server-side-rendering