vue项目刷新页面404解决方案(nginx和oss)
一、nginx解决方案
server {
listen 81;
server_name xx.xx.com;
location / {
root /web/dist;
index index.html index.htm;
try_files $uri $uri/ @rewrites; #关键配置:try_files方法让Ngxin尝试访问后面的$uri $uri/ 和 @rewrites,前面都找不到,最后根据@rewrites配置进行内部重定向
}
location @rewrites { #关键配置
rewrite ^(.+)$ /index.html last; #关键配置 内部重定向到 xx.xx.com/index.html
} #关键配置
access_log /usr/local/etc/nginx/logs/access.log main;
error_log /usr/local/etc/nginx/logs/error.log;
}
二、oss对象存储解决方案
因为oss不支持nginx这种复杂的rewrite规则,所以暂时想到一个折衷的方法,就是将404页面都跳转到index.html来解决这个问题,因为oss存储是基于文件的,没有对应的文件就无法访问,vue 项目build之后只有几个js文件,已经没有对应的文件了
目录结构
关键在这里,默认404页面跳转到index.html即可
绑定你的域名即可