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.mfbz.cn/a/766791.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

pycharm的usages在哪设置?

参考文章:https://blog.51cto.com/save/8961821 在代码编辑器(如PyCharm或IntelliJ IDEA)中,"1 usage"通常表示当前光标所在的代码元素(如变量、函数、类等)在其他地方被使用了一次。这个功能可…

springboot java.lang.ClassNotFoundException: dm.jdbc.driver.DmDriver 应该如何解决

遇到的问题:项目中引用了外部的达梦jar包 在idea中正常使用 也能找到dm.jdbc.driver.DmDriver 驱动 但是当通过jenkins 构建部署到服务器上 总是报 ClassNotFoundException: dm.jdbc.driver.DmDriver 找不到驱动 应用到的驱动代码如下格式 排查步骤 1.首先看你的项…

怎么将视频字幕提取翻译?字幕提取的方法大全来了

谁说提取视频字幕非得大费周章?其实用专业软件也能轻松搞定字幕转换,让你告别传统繁琐的转文字工作! 想象一下,简单的几个步骤,你的视频就能从屏幕上的文字转化为可编辑的文档。是不是已经迫不及待想要尝试了&#xf…

基于SpringBoot的漫画网站系统

你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。 开发语言:Java 数据库:MySQL 技术:B/S架构模式、Java技术 工具:Visual Studio、MySQL数据库开发工具 系统展示 首页 用户…

Nginx主配置文件---Nginx.conf

nginx主配置文件的模块介绍 全局块: 全局块是配置文件从开始到 events 块之间的部分,其中指令的作用域是 Nginx 服务器全局。主要指令包括: user:指定可以运行 Nginx 服务的用户和用户组,只能在全局块配置。例如&…

Linux基础指令介绍与详解——原理学习

前言:本节内容标题虽然为指令,但是并不只是讲指令, 更多的是和指令相关的一些原理性的东西。 如果友友只想要查一查某个指令的用法, 很抱歉, 本节不是那种带有字典性质的文章。但是如果友友是想要来学习的,…

Elasticsearch实战教程: 如何在海量级数据中进行快速搜索

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 引入 Elasticsearch(简称ES)是一个基于Apache Lucene™的开源搜索引擎,无论在开源还是专有领…

【NLP学习笔记】load_dataset加载数据

除了常见的load_dataset(<hf上的dataset名>)这种方式加载HF上的所有数据外&#xff0c;还有其他custom的选项。 加载HF上部分数据 from datasets import load_dataset c4_subset load_dataset("allenai/c4", data_files"en/c4-train.0000*-of-01024.js…

不改代码,实现web.config或app.config的连接字符串加密解密

目的&#xff1a;加密字符串&#xff0c;防止明文显示。 好处&#xff1a;不用修改代码&#xff0c;微软自带功能&#xff0c;自动解密。 web.config 参考相关文章&#xff1a; Walkthrough: Encrypting Configuration Information Using Protected Configuration | Microso…

SQL执行慢排查以及优化思路

数据库服务器的优化步骤 当我们遇到数据库调优问题的时候&#xff0c;该如何思考呢&#xff1f;我把思考的流程整理成了下面这张图。 整个流程划分成了观察&#xff08;Show status&#xff09;和行动&#xff08;Action&#xff09;两个部分。字母 S 的部分代表观察&#xf…

小红书运营教程02

小红书大致会分享10篇左右。微博、抖音、以及视频剪辑等自媒体运营相关技能以及运营教程相关会陆续的进行分享。 上次分享涉及到的对比,母婴系列,或者可以说是服装类型,不需要自己过多的投入,对比知识类博主来说,自己将知识讲述出来,然后要以此账号进行变现就比较麻烦,…

SARscape——GAMMA滤波

目录 一、算法原理1、概述2、参考文献 二、软件操作三、结果展示1、原始图像2、滤波结果 一、算法原理 1、概述 GAMMA滤波器假定数据服从GAMMA 分布&#xff0c;被滤波器滤除的像元将被基于局部统计计算出的方差系数所代替。其数学模型为: F i j { M , C x < C u B M P 2…

gin框架 gin.Context中的Abort方法使用注意事项 - gin框架中立刻中断当前请求的方法

gin框架上下文中的Abort序列方法&#xff08;Abort&#xff0c;AbortWithStatus&#xff0c; AbortWithStatusJSON&#xff0c;AbortWithError&#xff09;他们都不会立刻终止当前的请求&#xff0c;在中间件中调用Abort方法后中间件中的后续的代码会被继续执行&#xff0c;但是…

电子价签能够给零售业带来哪些效益?

在竞争激烈的零售市场中&#xff0c;每一个细微的优化都可能成为吸引顾客和提升效率的关键。随着技术的不断进步&#xff0c;电子价签作为一种革新性的解决方案&#xff0c;正以其独特的优势重新定义零售运营的标准。那它到底能给我们的零售门店带来哪些实际效益&#xff1f; …

Qt时间日期处理与定时器使用总结

一、日期时间数据 1.QTime 用于存储和操作时间数据的类&#xff0c;其中包括小时(h)、分钟(m)、秒(s)、毫秒(ms)。函数定义如下&#xff1a; //注&#xff1a;秒(s)和毫秒(ms)有默认值0 QTime::QTime(int h, int m, int s 0, int ms 0) 若无须初始化时间数据&#xff0c;可…

基于FPGA的DDS信号发生器

前言 此处仅为基于Vivado实现DDS信号发生器的仿真实现&#xff0c;Vivado的安装请看下面的文章&#xff0c;这里我只是安装了一个标准版本&#xff0c;只要能够仿真波形即可。 FPGA开发Vivado安装教程_vivado安装 csdn-CSDN博客 DDS原理 DDS技术是一种通过数字计算生成波形…

Linux shell编程学习笔记61: pstree 命令——显示进程树

0 前言 在 Linux shell编程学习笔记59&#xff1a; ps 获取系统进程信息&#xff0c;类似于Windows系统中的tasklist 命令https://blog.csdn.net/Purpleendurer/article/details/139696466?spm1001.2014.3001.5501 中我们研究了ps命令。在Linux中&#xff0c;通过ps命令&am…

Perl语言入门指南

一、绪论 1.1 Perl语言概述 1.2 Perl的特色 1.3 Perl面临的问题 1.4 Perl语言的应用领域 二、Perl语言基础 2.1 Perl语言的历史发展 2.2 Perl语言的基本语法 2.3 Perl语言的数据类型 三、Perl语言控制结构 3.1 条件语句 3.2 循环结构 3.3 函数和子程序 四、Perl语…

RK3568驱动指南|第十五篇 I2C-第183章 SMBus总线介绍

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

电脑版微信自动发送微信消息给好友或者群聊

一.软件下载 点击微信自动发送消息下载 二.相关使用方法 1.打开软件&#xff0c;输入想自动发送的内容 2.确保登录了微信电脑版【PC端】&#xff0c;然后切换到想要自动发送的好友或群聊的窗口。 3.点击开始&#xff0c;现在自动发送即可&#xff0c;稍等三秒程序自动运行。 …