vue-router踩坑：History模式下，打包后页面访问404

在开发vue单页应用时，遇到一个问题：

在history模式下，开发环境各页面访问正常，但是在生产环境（nodejs/Express服务器），只能访问首页，其他使用vue-router跳转的页面全部是404。而在hash模式下开发环境和生产环境路由跳转均无问题。

后来详细查看vue-router文档中关于history部分，提到中间件：connect-history-api-fallback。

var express = require('express');var history = require('connect-history-api-fallback');
var app = express();app.use(history());

关于这个问题，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错误。

阅读更多