问题

使用nginx 部署vue项目的时候 当我们刷新页面的时候,或者访问路由配置页面的时候会直接提示404!

分析

这个问题不是BUG,而是因为通常我们做的vue项目属于单页面开发。所以只有index.html;
解决这个问题也很简单。只需要将访问重定向到 index.html这个页面,交由 index.html 去处理对应的路由跳转就好。
刷新页面时访问的资源在服务端找不到,由于vue-router设置的路径不是真实存在的路径。
如上的404现象,是由于在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访问资源都是在js里渲染的。

解决

在nginx配置里添加vue-route的跳转设置(这里首页是index.html,若是index.php就在下面对应位置替换),正确配置以下(添加下面标红内容):

方法1:

只限于配置一个项目
[root@test-huanqiu ~]# cat /home/soft/nginx/conf/default.conf

server {
    listen       80;
   server_name  localhost; #这里可以直接添加IP
	location / {
	         root /home/soft/nginx/html/dist; #dist为打包后的文件
             try_files $uri $uri/ @router;  #
             index index.html;
        }
    #路由配置信息 (解决页面刷新404问题)
	location @router {
            rewrite ^.*$ /index.html last;
        }
		}

重启nginx后,问题解决;
[总结:nginx配置文件里必定要定义access和error日志,出现问题要第一时间查看日志(error)]

方法2:

在nginx的server里加上此段配置,有多个vue工程则每一个都配一个。若不配的话页面也能打开,只是二级页面刷新会404

server {
    listen       80;
    server_name  localhost;
    location /dist1 {
        #如果是docker部署,一定要配置容器里面挂载的目录;
        alias   /usr/share/nginx/html/dist1; 
        #项目存放地址里边包含static、index.html;就是前端打包的dist文件;
        index  index.html index.htm;
        try_files $uri $uri/ /dist1/index.html; #解决页面刷新404问题
    }
    location /dist2 {
        alias   /usr/share/nginx/html/dist2;
        index  index.html index.htm;
        try_files $uri $uri/ /dist2/index.html; #解决页面刷新404问题
    }
    location /dist3 {
        alias   /usr/share/nginx/html/dist3;
        index  index.html index.htm;
        try_files $uri $uri/ /dist3/index.html; #解决页面刷新404问题
    }
    location /dist4 {
        alias   /usr/share/nginx/html/dist4;
        index  index.html index.htm;
        try_files $uri $uri/ /dist4/index.html; #解决页面刷新404问题
    }
    }

个人理解:$uri表示访问的页面 $uri/表示配置的根路径,若是路径下没有,则跳转到根路径下的/project/index.html
希望可以帮助到大家,欢迎大家留言交流,一起共同学习!

Logo

前往低代码交流专区

更多推荐