问题: Vue项目打包部署Nginx服务器后,刷新页面后出现404的问题。
原因: 加载单页应用后路由改变均由浏览器处理,而刷新时将会请求当前的链接,而Nginx无法找到对应的页面。
解决:在Nginx配置文件nginx.conf中加入如下配置:
try_files $uri $uri/ /index.html;文章来源:https://www.toymoban.com/news/detail-522936.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发起请求跳转(该路由必须真实,不然会报错)文章来源地址https://www.toymoban.com/news/detail-522936.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的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!