2017-03-09 33 views
2

我一直在試圖弄清楚這幾個小時,我的頭即將爆炸。我真的希望這不是一些愚蠢的小細節,我錯過了...快遞靜態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.') 
 
      } 
 
      }); 
 
     });

這是我的模板。 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錯誤的請求錯誤。

我真的希望有人能幫助我在這一個...

編輯

這是我看到開發者控制檯上: Developer console screenshot

回答

2

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)) 
+0

是的,我認爲就是這樣。我改變了這一點,client.js文件現在正在服務。仍然沒有CSS雖然:( – YT98

+0

我把style.css放在dist目錄中,它現在的作品。我不明白爲什麼公共目錄沒有正確服務。 – YT98

+0

你可以'console.log(path.resolve (__dirname,'../'))'在你的server.js中?它應該指向你的項目的根目錄。 – idbehold