Vue JS 2中如何为history模式配置http-server

问题原因 #

vue-router 开启 history 模式后，路由跳转基于浏览器 History API 实现，服务端不存在对应路径的真实静态文件。直接访问 /page1 这类子路由路径时，http-server 默认会尝试读取对应路径的静态资源，找不到就返回 404 错误。只要将所有非静态资源的请求都重定向到根目录的 index.html，交给前端路由接管匹配即可解决问题。

解决方案 #

启动 http-server 时添加 fallback 参数，指定 404 响应返回 index.html 文件，修改后的启动命令如下：

http-server dist -f /index.html

如果你使用的是旧版本 http-server，不支持 -f/--fallback 参数，可以改用代理参数实现相同效果：

http-server dist --proxy http://localhost:8080?

末尾的问号可以避免请求的 query 参数被丢弃，保证路由传参不受影响。

效果验证 #

修改启动命令重启服务后，再次直接访问子路由地址即可正常加载页面，不会再返回 404。

内容的提问来源于stack exchange，提问作者Fomalhaut