nginx部署前端项目后刷新浏览器报错404问题解决
作者：java李杨勇
现在前端页面部署正常访问,但是刷新的时候出现了404,所以下面给整理下,这篇文章主要给大家介绍了关于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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！