node部署react/react-router靜態文件路由問題

今天又又又踩坑。。天天都在踩坑的路上不停歇。。

 

昨天將webpack開發模式(webpack-dev-server以及熱更新)和打包都完成了，今天又有新要求。

 

由於react-router基於browserHistory寫的，本身還readme裏友情提示了一下本地處理須要用hashHistory，結果就被懟了。不容許修改源代碼。。那我就開始頭痛了，由於browserHistory下打包好的靜態文件訪問就瘋狂報錯。

 

度娘上查了一番 說法都是browserHistory須要服務器的支持。而後大哥又發話了：沒說必定不用服務器。。那就用node來部署一下靜態文件好了。

 

app.use(express.static(path.resolve(__dirname, '../build')))

經過app.use將靜態文件傳到node服務器上，打開監聽的http://localhost:8080/ 發現網頁出來了跳轉到http://localhost:8080/login，暗自覺得能夠了，結果手賤按了一下刷新，報錯開始：Cannot GET /login

 

node找不到這個路由，又開始頭痛，由於本身在前端用react-router寫了路由，node識別不出來，查了一下發現，node的路由優先級大於react-router路由。

 

那麼前面只是將靜態資源上傳上去了，訪問http://localhost:8080/login時，node找不到/login這個路由，更找不到index.html這個頁面，那麼咱們須要將這個頁面傳上去，讓前端去對路由進行識別

app.use(express.static(path.resolve(__dirname, '../build'))) app.use(function(req, res){ res.sendFile(path.resolve(__dirname, '../build/index.html')); })

再啓動，刷新 ok完事