配置Nginx适配Vue.js打包项目路由404问题求助

嘿，我来帮你搞定这个问题！首先得搞明白为啥会出现404：Vue的路由是前端路由，当你直接访问qy.abc.xyz/index或者qy.abc.xyz/xxx/xxx这类路径时，Nginx会默认去服务器上找对应的物理文件——但你的dist目录里根本没有这些文件啊，只有index.html和那些带哈希的js/css，所以Nginx找不到就返回404了。

你原来的配置里其实已经用到了try_files，但可能是配置逻辑或者优先级的问题？另外你后来改成return 200 /index.html的做法是踩坑了，这会让所有请求（包括真实存在的js、css文件）都返回index.html，结果就是你的页面根本加载不了任何静态资源。

下面给你正确的Nginx配置，我会标注关键细节：

server {
    listen 80;
    server_name qy.abc.xyz;
    charset utf-8;

    access_log /var/log/nginx/qy.abc.xyz.access.log main;

    # 先处理静态资源：确保js、css、图片这些真实存在的文件能正常返回
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        root /data/ldl/repo/vue_user_site/dist;
        # 静态资源可以设长缓存，优化加载速度
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # 核心：处理SPA路由的逻辑
    location / {
        access_log /data/nginx_log/access.log main;
        error_log /data/nginx_log/error.log error;
        
        root /data/ldl/repo/vue_user_site/dist;
        index index.html;

        # 关键逻辑：先找请求的文件→再找请求的目录→都找不到就返回index.html给Vue路由处理
        try_files $uri $uri/ /index.html;
    }
}

几个重要的点要注意： #

• 静态资源单独配置：把js、css这类真实存在的文件单独匹配，避免被try_files错误导向index.html，保证静态资源能正常加载。
• try_files的正确用法：这个指令的顺序很重要，先检查请求的路径是否对应真实文件（比如/js/app.xxx.js），再检查是否是目录，都找不到才交给Vue的前端路由来处理。
• 别用return 200 /index.html：这种一刀切的方式会毁掉所有静态资源的访问，绝对不能这么干。

另外，还要确认你的Vue项目用的是history路由模式（如果是hash模式的话本来就不会有这个问题，但history模式更美观），在你的router/index.js里应该是这样的：

const router = new VueRouter({
  mode: 'history', // 这里必须是history模式
  routes: [...]
})

如果你的路由模式已经是history，那上面的Nginx配置应该就能完美解决你的404问题了！

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