Vue应用生产构建后Auth0回调返回404，开发模式正常该如何解决？

问题根因 #

这是SPA单页应用的客户端路由适配问题，差异来自开发服务和你本地测试用的静态服务的默认配置不同：

• npm run serve启动的Vue CLI开发服务默认开启了history路由回退规则：所有不存在的路径请求都会自动返回根目录的index.html，交由Vue Router的客户端逻辑识别/callback路径，所以开发环境流程完全正常。
• 你本地测试用的http-server默认没有开启该回退规则，当Auth0重定向到/callback时，服务会直接尝试在dist目录下查找对应路径的静态资源，找不到就返回404错误。

本地测试修复方法 #

启动http-server时添加--proxy参数开启404回退即可，假设你服务跑在8080端口，命令如下：

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

配置后所有找不到静态资源的请求都会返回index.html，客户端路由就能正常识别/callback路径。

正式部署注意事项 #

后续上线到生产环境时，需要对应配置你使用的Web服务器（Nginx、Apache等）的URL重写规则，把所有非静态资源的请求都指向index.html，避免用户直访前端路由路径时出现404。

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