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;}}  }

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！