vue项目线上页面刷新报404 解决方法

在上线vue开发的前端网页上线后，刷新页面报404错误，因为网页上显示的是静态绝对路径，实际上服务器上是没有改路径的所以刷新汇报错误。

1、vue框架中解决404

vue router  mode 默认为hsas, 这样的url中带有#，如果把mode: 'history'就能去掉#号，也可以正常访问，但是再次刷新页面就会出现404错误。

const router = new Router({
mode: 'history'
});
url中带有#，让有强迫症的人很不爽，可以去掉，去掉后就需要改nginx配置文件了。

2、修改nginx配置文件

location / {
root ...
index ...
try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}　

将上面代码放入nginx配置文件中 

保存退出

 

. ./nginx -t -- 验证nginx配置文件是否正确
. ./nginx -s reload -- 重启nginx
记得修改完nginx配置文件一定要重启nginx  不然没有效果！！！

 

Nginx--try_files 解释

一、Nginx的配置语法灵活，可控制度非常高。在0.7以后的版本中加入了一个try_files指令，配合命名location，可以部分替代原本常用的rewrite配置方式，提高解析效率。

 

作用域：server location

location  / {
                root  /var/www/build;
                index  index.html index.htm;
                try_files $uri $uri/ @rewrites;
        }
  
location @rewrites {
             rewrite ^(.+)$ /index.html last;
        }

try_files $uri $uri/ @rewrites
 这句话是什么意思？

 

try_files从字面上理解就是尝试文件，再结合环境理解就是“尝试读取文件”，那他想读取什么文件呢，

答：读取静态文件

 

$uri  这个是nginx的一个变量，存放着用户访问的地址,

比如：http://www.xxx.com/index.html, 那么$uri就是 /index.html

 

$uri/ 代表访问的是一个目录，比如：http://www.xxx.com/hello/test/    ，那么$uri/就是 /hello/test/

 

完整的解释就是：try_files 去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；

不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转到第三个参数上。

 

比如用户访问这个网地址：http://www.xxx.com/test.html

try_files首先会判断他是文件，还是一个目录，结果发现他是文件，与第一个参数 $uri变量匹配。

然后去到网站目录下去查找test.html文件是否存在，如果存在直接读取返回。如果不存在直接跳转到第三个参数，而第三个参数是一个location,而这个location里面配置的就是rewrite规则。

二、常见的nginx配置文件中常见如下写法：

server {
        listen 80;
        server_name localhost;
        root html/;
        index index.html index.htm index.php;
        location / {
            try_files $uri $uri/ /index.php?$args;
            proxy_pass http://www.baidu.com;
        }
        location ~ \.(html|htm)$ {
            try_files $uri = 404;
        }
        location ~ \.php$ {
            try_files $uri = 404;
            include fastcgi.conf;
            fastcgi_pass 127.0.0.1:9000;
        }
    }

try_files

这个东西是重定向用的，我感觉和index 差不多，不过确实比index 要好用

举个例子：

访问：xf.com/aa

如果我们这么设置，对于这一句的理解是。

try_files $uri $uri/ /index.php?$args;

当nginx 收到你的xf.com/aa ，那么会匹配到 

location / {
            try_files $uri $uri/ /index.php?$args;
            proxy_pass http://www.baidu.com;
        }

这里多说一嘴，如果没有合适的匹配，那么就会找index的值。

index.html inde.htm index.php

当找到相对应的文件，就会把你的访问url变成。

xf.com/index.html或者xf.com/index.htm  xf.com/index.php 其中一个

这回你明白index了吧

回来我们再说  try_files

当匹配到这项的时候，就开始执行try_files

nginx 回去找有没有 aa这个文件（$uri） 如果没有

继续找aa这个目录（$uri/） 如果也没有的话就直接

重定向到   /index.php?$args    

$args 就是你的url 问号后边的参数