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

红太狼 2022-06-07 08:50 428阅读 0赞

# 部署背景和问题描述 #

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

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

这还是不是最明显的最明显的如这种目录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文件,该文件主要执行的路由规则如下：

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

可以看到整个过程除了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
    
    }

配置完成重启，可以成功刷新和点击进入其他页面。

声明：对于vue-router部分的理解并不到位，如有疏漏和错误，请各位拍砖，谢谢。

# 参考资料： #

[散尽浮华的博客:vue-route+webpack部署单页路由项目，访问刷新出现404问题  
][vue-route_webpack_404_]

[vue-route+webpack部署单页路由项目，访问刷新出现404问题][vue-route_webpack_404]

[SouthEast]: /images/20220607/cad344adeea043f8b682c822fd234f85.png
[SouthEast 1]: /images/20220607/6549231078054ab78338510af1d958ac.png
[http_baidu.com_query_w_1]: http://baidu.com/query?w=1
[vue-route_webpack_404_]: http://www.cnblogs.com/kevingrace/p/6126762.html
[vue-route_webpack_404]: http://blog.csdn.net/sanstu/article/details/76064255