nginx配置vue-router+webpack项目部署访问刷新出现404问题

解决Vue单页应用404问题

最新推荐文章于 2025-10-15 15:06:34 发布

原创最新推荐文章于 2025-10-15 15:06:34 发布 · 1.1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue-route #404

nginx 专栏收录该内容

7 篇文章

订阅专栏

本文针对Vue单页应用在部署后遇到的404错误问题提供了解决方案，通过配置Nginx服务器使得所有路由请求都能正确解析并返回index.html，确保SPA在刷新或直接访问内部路由时正常工作。

部署背景和问题描述

项目使用的是vue2.0,vue-route,webpack打包
项目部署使用的nginx
问题描述：
正常首页不加index可以访问
如：浏览器输入192.168.0.251可以正常访问并返回
这里写图片描述

但是当按下F5或者刷新页面时就出现如下404错误
这里写图片描述

这还是不是最明显的最明显的如这种目录192.168.0.251/user
基便不刷新而只是访问依然是报的404

原因

打开开发包我们会看到除了index.html根本就不存在如上的index和user文件，当然是找不到的因此就返回了404错误。

vue-router项目的url实现方式

本人并无具体参考vue-router源码，以下内容只是根据项目和当前项目部署需要的经验之谈，如有不对，请各位指正。

涉及到url必然要弄清楚vue-router中url的作用和普通项目的作用原理是否相同。

vue-router项目归根结底是因为vue-router其本身只存在一个index.html文件，index.thml中只会加载一个打包过的js文件,该文件主要执行的路由规则如下：

获取当前的URL
获取URL除IP:端口和？之间的部分路径参数（如：http://baidu.com/query?w=1获取到的路径是/query和参数w=1）
根据路径参数查找路由中是否存在该路径,存在则传入参数（如w=1）给该方法并执行相关js方法进行dom渲染，不存在则返回空内容（和nginx的404不同）
渲染元素和dom（包括空内容）到index.html的body标签中
完成渲染呈现页面在客户端（视觉上发生变化）

可以看到整个过程除了URL变动但是实际上html的外层DOM标签是没有变化和重新加载的（body标签和它的父标签），而我们平常的常规项目需要真实的路径对应到项目中的实际文件匹配然后服务器找到后返回给客户端（找不到就报404错误）。

解决思路

因此找到原因就好办了，只需要当服务器发现客户端发来的url时就重定向（服务器重定向）到默认的index.html文件内容并返回给客户端，这样就实现了它的自身的路由功能。

但是也会出现一下问题，比如多个项目使用同一个域名和ip地址的情况，虽然vue项目可以正常访问，但是其他类型的项目显然会问题（一直停留在首页不动，至少是在视觉上不动）。这时就需要根据不同的项目名设置不同的规则，这个内容请参考另外的的文章：nginx配置多个项目（太简单了没写，自行百度）

解决方法

 server {
         listen 80;

         server_name testwx.wangshibo.com;
         root /mnt/app/xm_web;
         index index.html;
        # access_log /var/log/testwx.log main;

        #处理vue-router路径Start
        #如果找不到路径则跳转到@router变量中寻找,找到了就默认进入index.html
        location / {
             try_files $uri $uri/ /index.html last;
             index index.html;
         }
        #处理vue-router路径End

}