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

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

一、vue框架中解决404

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

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

二、修改nginx配置文件

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

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

保存退出

 

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

 

Nginx--try_files 解释

1、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规则。

2、常见的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 问号后边的参数