Vue.js构建后直接访问URL报404，router.push正常问题求助

我之前也碰到过一模一样的问题，开发时用this.$router.push()跳/scan完全正常，一打包用静态服务器启动就404，太懂这种前后不一致的崩溃感了！

为什么开发环境正常，生产环境失效？ #

开发环境用的Vue CLI内置的webpack-dev-server，它默认就支持HTML5 History模式的路由 fallback——当你访问/scan这种不存在的文件路径时，服务器会自动返回index.html，让Vue Router去处理这个路由。但生产环境的静态服务器（比如http-server、Nginx）默认不会这么做，它会真的去磁盘上找/scan这个文件/目录，找不到就返回404。

针对你当前的两种场景，分别给解决方案： #

1. 用http-server启动dist目录时的解决方法

http-server本身不支持自动fallback到index.html，需要手动加参数指定：

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

这个-P参数会让服务器把所有找不到的请求重定向到index.html，Vue Router就能接管路由了。

2. Nginx配置的正确姿势（你之前可能配置位置不对）

确保你的try_files配置放在正确的location块里，完整的Nginx server配置示例如下：

server {
    listen 8080;
    server_name localhost;
    # 这里替换成你dist文件夹的绝对路径，比如 /home/user/project/dist
    root /path/to/your/dist;
    index index.html;

    # 关键：处理所有根路径的请求
    location / {
        try_files $uri $uri/ /index.html;
    }
}

配置完后记得重启Nginx服务，让新配置生效：

# 重启Nginx（不同系统命令可能略有不同）
sudo nginx -s reload

额外排查点 #

• 检查你的vue.config.js里的publicPath配置，如果它不是默认的'/'（比如设成了'/app/'），那Nginx的location和try_files也要对应调整，或者直接把publicPath改回'/'（适合根域名部署的场景）。
• 如果还是不行，查看Nginx的错误日志（通常在/var/log/nginx/error.log），里面会有具体的配置错误提示，能帮你快速定位问题。

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