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;
        }
    }
相关推荐
GIS之路2 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴10 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥13 分钟前
HTML之表单结构全解析
前端·html
JosieBook20 分钟前
【Java编程动手学】Java中的数组与集合
java·开发语言·python
聪聪的学习笔记24 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
N_NAN_N35 分钟前
类图+案例+代码详解:软件设计模式----单例模式
java·单例模式·设计模式
小磊哥er37 分钟前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
weixin_3993806943 分钟前
k8s一键部署tongweb企业版7049m6(by why+lqw)
java·linux·运维·服务器·云原生·容器·kubernetes
lang201509281 小时前
Reactor ConnectableFlux支持多订阅者
java·网络
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app