vue-router踩坑:History模式下,打包后页面访问404
在开发vue单页应用时,遇到一个问题:在history模式下,开发环境各页面访问正常,但是在生产环境(nodejs/Express服务器),只能访问首页,其他使用vue-router跳转的页面全部是404。而在hash模式下开发环境和生产环境路由跳转均无问题。后来详细查看vue-router文档中关于history部分,提到中间件:connect-history-api-fallback。var
在开发vue单页应用时,遇到一个问题:
在history模式下,开发环境各页面访问正常,但是在生产环境(nodejs/Express服务器),只能访问首页,其他使用vue-router跳转的页面全部是404。而在hash模式下开发环境和生产环境路由跳转均无问题。
后来详细查看vue-router文档中关于history部分,提到中间件:connect-history-api-fallback。
关于这个问题,connect-history-api-fallback文档中也有提及:
Single Page Applications (SPA) typically only utilise one index file that isaccessible by web browsers: usually index.html
. Navigation in the applicationis then commonly handled using JavaScript with the help of theHTML5 History API.This results in issues when the user hits the refresh button or is directlyaccessing a page other than the landing page, e.g. /help
or /help/online
as the web server bypasses the index file to locate the file at this location.As your application is a SPA, the web server will fail trying to retrieve the file and return a 404 - Not Foundmessage to the user.
大致意思是:单页应用通常只有一个浏览器可以访问的index.html。但是如果使用history模式,用户直接访问或者刷新非index.html时,例如访问'/list',web服务器会绕过index.html,去'/list'位置找相应的页面,这样就会导致404。而connect-history-api-fallback中间件,会把访问地址改成'/',然后vue-router渲染对应的list组件。
与此类似的还有一个问题,在《JavaScript高级程序设计》第16章-16.4-历史状态管理 中有提到:在使用HTML5的状态管理机制时,请确保使用pushState()创造的每一个“假”URL,在Web服务器上都有一个真的、实际存在的URL与之对应。否则,单击“刷新”按钮会导致404错误。
更多推荐
所有评论(0)