目录
一、功能描述
实现:
vue项目中使用history模式的路由时,解决访问深层级的路由返回404的问题。
nginx配置了ssl证书的情况下,解决history路由刷新报404的问题。
版本:nginx/1.16.1。
二、代码实现
nginx.conf中相关配置:
server {
listen 80;
server_name ;
# http 转成 https,配置了ssl证书时启用
return 301 https://$host$request_uri;
# 解决history路由刷新问题
location / {
# index.html文件在服务器中的存储目录
root /data/www; # /data/www需要修改为你服务器中的目录
index index.html index.htm;
#资源访问失败后定向到index.html
try_files $uri $uri/ /index.html;
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# SSL证书配置
server {
listen 443 ssl;
server_name ;
ssl_certificate ;
ssl_certificate_key ;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
# 解决http转https后路由报错问题
location / {
root /data/www;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
三、最终效果