react-router打包后無法通過路由進入到頁面

react-router打包后無法通過路由進入到頁面，是因為當我們使用react-router-dom里的BrowserRouter as Router時，是用瀏覽器history對象的方法去請求服務器，

如果服務器沒有相對於的路由去指向對應的頁面路由會找不到資源。

BrowserRouter會變成類似這樣的路徑  http://111.230.139.105:3001/detail/9459469，這樣的路徑在訪問服務器時，服務器會認為是請求查找某個接口數據

This request URL /detail/9459469 was not found on this server.

所以這時候必須使用HashRouter，這時候訪問具體頁面時就是http://111.230.139.105:3001/#/detail/9459469

import { HashRouter as Router, Route } from 'react-router-dom'
import createHistory from 'history/createHashHistory'
const history = createHistory()

<Router history={history}>
             <Route render={({ location }) => {
                  return(
                        <div>
                            <Route location={location} exact path="/" component={Home} />
                            <Route location={location} path="/detail/:id" component={Detail} />
                            <Route location={location} path="/comment/:id" component={Comment} />
                        </div>
                  )}}/>
        </Router> 

 

webpack打包時要添加NODE_ENV,並且將devtool:'eval-source-map',去除，不然build出來的js特別大，source map是為了代碼出錯后采用source-map的形式直接顯示你出錯代碼的位置

打包生產包時去除，加上這兩個后大部分簡單單頁面應用會在100k到200k

new webpack.DefinePlugin({
    "process.env": {
    NODE_ENV: JSON.stringify("production")
    }
}),    

// devtool:'eval-source-map',