当前位置: 首页 > news >正文

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;}}

http://www.lryc.cn/news/390449.html

相关文章:

  • 区块链开发入门:基础概念与实施技术详解
  • Rust破界:前端革新与Vite重构的深度透视(下)
  • Android 解决 “Module was compiled with an incompatible version of Kotlin“ 问题
  • linux nfs的使用
  • eclipse断点调试(用图说话)
  • vue的学习--day2
  • html + css 快速实现订单详情的布局demo
  • 居然这么简单就能实现扫雷游戏!
  • 安装Gitlab+Jenkins
  • php 命令行模式详解
  • Git 基础-创建版本库 git init、添加到暂存区git add、查看状态git status、查看改动git diff
  • Python实现无头浏览器采集应用的反爬虫与反检测功能解析与应对策略
  • 法国工程师IMT联盟 密码学及其应用 2023年期末考试题
  • 魔行观察-AI数据分析-蜜雪冰城
  • 如何在CSS中设置px值
  • 【linux】find命令详解
  • Android音频管理器探索与应用
  • qt QTreeWidget文件管理器拖入应用,从应用拖入文件管理器拷贝
  • Qt中使用MySQL数据库详解,好用的模块类封装
  • C语言实现 人生重生模拟器游戏
  • C语言两个较大数字相加
  • 大数据面试题之Flume
  • js文件的执行和变量初始化缓存
  • 无法定位程序输入点Z9 qt assertPKcS0i于动态链接库F:\code\projects\06_algorithm\main.exe
  • GoLand 2024 for Mac GO语言集成开发工具环境
  • Protocol Buffer 基础(c++)
  • 上位机网络通讯
  • 转让5000万无区域能源公司要求和流程
  • WordPress Quiz Maker插件 SQL注入漏洞复现(CVE-2024-6028)
  • Swift中的二分查找:全面指南