快递静态CSS没有服务

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

我有一个服务器端渲染反应应用程序设置。 一切都很好。 我唯一的问题是,我似乎无法得到加载的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错误的请求错误。

我真的希望有人能帮我解决这个问题

编辑

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

你的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))