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;  # ⾸页
}
}
# 这个配置的意思很简单就是当我们在浏览器访问localhost:8080的时候，默认⾸页是index.html，去⽬录d:/nginx/demo/寻资源
我们看下d:/nginx/demo/下⾯有什么资源：
我们分别访问下⾯的地址的结果：
localhost:8080/ 能正常访问，默认显⽰index.html页⾯
localhost:8080/demo.html 能正常访问
localhost:8080/demo2.html 不能正常访问
localhost:8080/demo.png 能正常访问，返回404
localhost:8080/demo2.png 不能正常访问，返回404
通过上⾯我们得出⼀个结论就是nginx请求的静态资源如果匹配不到就显⽰404。
我们在来看下我们⽤vue run build构建的⽂件结构：
上⾯这个项⽬是⽤官⽅的vue-cli创建的⼀个demo构建的，我们发现构建的项⽬中根本没有路由配置中的请求资源⽂件，css⾥⾯是样式⽂件，js⾥⾯是js⽂件，所以我们刷新浏览器请求资源的时候会404，因为nginx匹配不到对应的资源⽂件名称。
注意：这⾥刷新⾸页是不会404的，因为上图的⽬录中有⼀个index.html的页⾯资源。
nginx部署前端项目前端路由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：
1. ⽂件d:/nginx/demo/vue-demo
2. ⽂件d:/nginx/demo/vue-demo/下的index⽂件
3. 请求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
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。