nginx部署前端项目后刷新浏览器报错404问题解决
问题: Vue项目打包部署Nginx服务器后,刷新页面后出现404的问题。
原因: 加载单页应用后路由改变均由浏览器处理,而刷新时将会请求当前的链接,而Nginx无法找到对应的页面。
解决:在Nginx配置文件nginx.conf中加入如下配置:
try_files $uri $uri/ /index.html;
# 变量解释
- try_files 固定语法
- $uri 指代home文件(ip地址后面的路径,假如是127.0.0.1/index/a.png,那就指代index/a.png)
- $uri/ 指代home文件夹
- /index.html 向ip/index.html 地址发起请求
try_files $uri $uri/ /index.html;
尝试解析下列2个文件/文件夹(自动分辨出,IP后面的路径是文件还是文件夹), $uri/$uri/,
如果解析到,返回第一个,
如果都没有解析到,向127.0.0.1/index.html发起请求跳转(该路由必须真实,不然会报错)
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8100; server_name localhost; charset utf-8; location / { root D:/deploy/web/http; index index.html index.htm; } } server { listen 80; server_name localhost; charset utf-8; location / { root D:/deploy/gn/http; index index.html index.htm; try_files $uri $uri/ /index.html; } } }
总结
到此这篇关于nginx部署前端项目后刷新浏览器报错404问题解决的文章就介绍到这了,更多相关nginx部署前端刷新浏览器404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Nginx服务器配置HTTPS nginx.config 配置文件(教程)
下面小编就为大家分享一篇Nginx服务器配置HTTPS nginx.config 配置文件(教程),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12Nginx、Apache、Lighttpd禁止目录执行php配置示例
这篇文章主要介绍了Nginx、Apache、Lighttpd禁止目录执行php配置示例,本文给出了单个目录、多个目录的禁止执行PHP的方法,需要的朋友可以参考下2014-09-09
最新评论