vue项目访问 域名/index.html 空页面问题
很大可能是vue前端没做404页面,在路由不匹配时会跳转到空路由页面。
也可以把所有路由不匹配的网址全部跳转到域名首页。防止出现404或者页面错误。
如果使用docker nginx部署项目,配置文件上会有
try_files $uri $uri/ /index.html;
- 这段配置会尝试匹配请求的URI,如果找不到对应的文件或目录,则重定向到
/index.html
,让Vue路由接管路由的处理。
那么问题来了/index.html在vue里面是我们的静态文件,如果跳转过去会是空白页面(即app.vue页面)。所以可以直接去修改
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ @test;
index index.html index.htm;
}
location @test{
rewrite ^/(.*)$ 你的域名; # 跳转到首页
}
或者去找到默认的nginx.conf文件或者要映射的配置文件加上(这样只能避免/index.html跳转到域名首页,其他页面例如/index.html----xxx还会是空白页面)
if ($request_uri = /index.html) { return 301 你的域名; }
完整的映射配置文件
upstream my_server{
server 你的域名:8080; # 后端server 地址
keepalive 2000;
}
server {
listen 80;
#填写绑定证书的域名
server_name 你的域名, localhost;
#把http的域名请求转成https,相当于用户访问http也可以自动跳转到https,避免出现网页提示不安全
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name 你的域名.cn;
#证书文件名称
ssl_certificate_key /etc/ssl/certs/你的域名.key;
#私钥文件名称 .crt和.pem都可以用
ssl_certificate /etc/ssl/certs/你的域名.crt;
ssl_session_timeout 1d;
ssl_session_cache shared:SSL:50m;
ssl_session_tickets off;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256;
ssl_prefer_server_ciphers on;
if ($request_uri = /index.html) {
return 301 https://你的域名/;
}
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
原文地址:https://blog.csdn.net/a983677218/article/details/140093722
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!