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

1、vue框架中解决404

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

const router = new Router({

mode: 'history'

});

url中带有#，让有强迫症的人很不爽，可以去掉，去掉后就需要改nginx配置文件了。

2、修改nginx配置文件

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

保存退出

. ./nginx -t -- 验证nginx配置文件是否正确

. ./nginx -s reload -- 重启nginx

记得修改完nginx配置文件一定要重启nginx  不然没有效果！！！

亲自试验截图：可以访问

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

作用域：server location

try_files

uriuriuri/ @rewrites

这句话是什么意思？

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

答：读取静态文件

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

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

uri/代表访问的是一个目录，比如：http://www.xxx.com/hello/test/，那么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配置文件中常见如下写法：

try_files

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

举个例子：

访问：xf.com/aa

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

try_files uriuriuri/ /index.php?$args;

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

location / {

try_files uriuriuri/ /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 问号后边的参数