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,会依次请求:
- 文件d:/nginx/demo/vue-demo
- 文件d:/nginx/demo/vue-demo/下的index文件
- 请求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
}
}
本文分析了在Nginx下,Vue项目刷新页面出现404错误的原因,指出当Nginx匹配不到静态资源时会返回404。Vue Router的history模式在刷新时因未向后端发送请求而避免404。解决方案是通过Nginx的try_files指令,确保所有请求重定向到index.html,从而顺利运行Vue应用。
979





