Nginx下刷新VUE页面出现404原因

Nginx下刷新VUE页面出现404原因

我们知道nginx主要通过http核心模块中的location来匹配浏览器发出URL来进行资源匹配，匹配成功了就返回结果。

下面是一个简单的nginx配置：

server {
    listen       8080;
    server_name  localhost;

    location / {
        root   d:/nginx/demo/;  # 资源查找目录，去那个文件夹去找静态资源
        index  index.html index.htm;  # 首页
    }
}

# 这个配置的意思很简单就是当我们在浏览器访问http://localhost:8080的时候，默认首页是index.html，去目录d:/nginx/demo/寻找资源

我们看下d:/nginx/demo/下面有什么资源：

我们分别访问下面的地址的结果：

• http://localhost:8080/ 能正常访问，默认显示index.html页面
• http://localhost:8080/demo.html 能正常访问
• http://localhost:8080/demo2.html 不能正常访问
• http://localhost:8080/demo.png 能正常访问，返回404
• http://localhost:8080/demo2.png 不能正常访问,返回404

通过上面我们得出一个结论就是nginx请求的静态资源如果匹配不到就显示404。

我们在来看下我们用vue run build构建的文件结构：

上面这个项目是用官方的vue-cli创建的一个demo构建的，我们发现构建的项目中根本没有路由配置中的请求资源文件，css里面是样式文件，js里面是js文件，所以我们刷新浏览器请求资源的时候会404，因为nginx匹配不到对应的资源文件名称。

注意：这里刷新首页是不会404的，因为上图的目录中有一个index.html的页面资源。

前端路由vue router的history和hash模式

我们发现404只出现在刷新的时候，直接通过点击路由地址是不会出现404的，这是为什么呢？

因为VUE的 Vue-Router为我们提供了history和hash模式，这种模式的作用就是-----改变页面的时候不会向后端发出请求。

因为不会像后端nginx发送请求，所以就不会出现404这种情况。

hash 模式和 history 模式都属于浏览器自身的特性。Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

怎么解决----利用Nginx提供的try_files配置来解决

其实方法很简单，我们知道既然后端提供了一个index.html页面，而前端路由的实现是通过vue-router来实现的，我们就可以每次请求资源你的时候直接请求到index.html上面即可，这里需要用到nginx的一个功能配置try_files。

try_files：

比如按照下面的配置请求http://localhost:8080/vue-demo，会依次请求：

1. 文件d:/nginx/demo/vue-demo
2. 文件d:/nginx/demo/vue-demo/下的index文件
3. 请求http://localhost:8080/index.html

server {
    listen       8080;
    server_name  localhost;

    location / {
        root   d:/nginx/demo/;  # 资源查找目录，去那个文件夹去找静态资源
        index  index.html index.htm;  # 首页
        try_files $uri $uri/ /index.html
    }
}