React啟用懶加載后,react-router使用BrowserRoute模式,二級路由頁面加載其他頁面時會報錯“找不到相應的chunk文件”。
如頁面demo/A中懶加載demo/B,會報錯“react-dom.development.js:13035 Uncaught ChunkLoadError: Loading chunk B failed.”。查看network請求發現懶加載B時的js請求路徑為demo/B/js/chunkName.js,而webpack打包后的統一放在了路徑dist/js下,故找不到對應的chunkName.js。
解決方法:
1.將react-router的模式改為HashRouter,由於采用#hash來實現路由,請求的chunkName.js路徑永遠在/js路徑下。
2.修改webpack的output參數,添加publicPath屬性為“/”,這樣所有的資源引用都將使用絕對引用方式,在多級路由下也能正常工作。