当前位置: 首页 > 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;}}

相关文章:

vue项目访问 域名/index.html 空页面问题

很大可能是vue前端没做404页面,在路由不匹配时会跳转到空路由页面。 也可以把所有路由不匹配的网址全部跳转到域名首页。防止出现404或者页面错误。 如果使用docker nginx部署项目,配置文件上会有 try_files $uri $uri/ /index.html; 这段配置会尝试…...

区块链开发入门:基础概念与实施技术详解

区块链开发入门:基础概念与实施技术详解 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 引言 随着区块链技术的快速发展,它已经不再局…...

Rust破界:前端革新与Vite重构的深度透视(下)

Rust破界:前端革新与Vite重构的深度透视(下) 前端开发者:拥抱 Rust 的策略与时机技能树的扩展 结语:跨界融合的未来展望Vite 重构的深远意义 附录:进一步探索 Rust 的资源指南 前端开发者:拥抱 …...

Android 解决 “Module was compiled with an incompatible version of Kotlin“ 问题

解决 “Module was compiled with an incompatible version of Kotlin” 问题 在Android开发中,有时我们会遇到Kotlin版本不兼容的问题。具体来说,你可能会看到如下错误: D:/.gradle/caches/transforms-3/caf5371a15e0d6ffc362b4a5ece9cd49…...

linux nfs的使用

版权声明:来自百度AI,此处记录是方便日后查看,无任何商业用途 linux网络文件共享服务之nfs NFS(Network File System)是一种允许计算机用户或者操作系统通过网络以类似本地的方式访问文件的协议。以下是一个简单的NF…...

eclipse断点调试(用图说话)

eclipse断点调试(用图说话) debug方式启动项目,后端调试bug调试 前端代码调试,请参考浏览器断点调试(用图说话) 1、前端 选中一条数据,点击删除按钮 2、后端接口打断点 断点按钮 介绍 resum…...

vue的学习--day2

如有错误,烦请指正~ 目录 一、什么是单页面应用程序 二、使用工具:node.js 三、工具链 易错点 一、什么是单页面应用程序 多个组件(例如登录、注册等以vue结尾的都叫做组件)在一个页面显示,叫单页面应用…...

html + css 快速实现订单详情的布局demo

突然安排让速写这样的一个布局&#xff0c;重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。 注&#xff1a;订单里面的金额都是随意写的 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8&…...

居然这么简单就能实现扫雷游戏!

目录 一.思路 1.成果展示 2.思路 二.具体操作 1.创建"棋盘" 2.初始化雷 3.布置雷 4.打印 5.排除雷 三.代码实现 1.test.c文件 2.thunder.h文件 3.thunder.c文件 Hello&#xff0c;大家好&#xff0c;今天我们来实现扫雷游戏&#xff0c;希望这一篇博客能给带给大家一…...

安装Gitlab+Jenkins

GItlab概述 GitLab概述&#xff1a; 是一个利用 Ruby on Rails 开发的开源应用程序&#xff0c;实现一个自托管的Git项目仓库&#xff0c;可通过Web界面进行访问公开的或者私人项目。 Ruby on Rails 是一个可以使你开发、部署、维护 web 应用程序变得简单的框架。 GitLab拥有与…...

php 命令行模式详解

PHP 的命令行模式&#xff08;Command Line Interface, CLI&#xff09;是 PHP 的一个特定版本或运行时配置&#xff0c;它允许 PHP 脚本在没有 Web 服务器的情况下直接在命令行环境中执行。CLI 版本的 PHP 通常不包含 CGI 或者其他 web server 接口&#xff0c;因此更轻量级&a…...

Git 基础-创建版本库 git init、添加到暂存区git add、查看状态git status、查看改动git diff

目录 1.创建版本库 git init 1.创建版本库 git init 在目录中创建新的 Git 仓库。 你可以在任何时候、任何目录中这么做&#xff0c;完全是本地化的。 在目录中执行 git init&#xff0c;就可以创建一个 Git 仓库了。 注意: 没事不要手动修改 .git 目录里面的文件&#xff0c;不…...

Python实现无头浏览器采集应用的反爬虫与反检测功能解析与应对策略

Python实现无头浏览器采集应用的反爬虫与反检测功能解析与应对策略 随着网络数据的快速增长&#xff0c;爬虫技术在数据采集、信息分析和业务发展中扮演着重要的角色。然而&#xff0c;随之而来的反爬虫技术也在不断升级&#xff0c;给爬虫应用的开发和维护带来了挑战。为了应…...

法国工程师IMT联盟 密码学及其应用 2023年期末考试题

1 在 Unix 下的安全性 (30 分钟) 1.1 问题 1 1.1.1 问题 我们注意constat到通过 SMTP 服务器发送“假”电子邮件&#xff08;垃圾邮件&#xff09;相对容易。越来越常见的做法是在 SMTP 连接之上部署dployer TLS 协议protocole&#xff08;即 SMTPS&#xff09;。这解决了垃圾…...

魔行观察-AI数据分析-蜜雪冰城

摘要 本报告旨在评估蜜雪冰城品牌作为投资对象的潜力和价值&#xff0c;基于其经营模式、门店分布、人均消费、覆盖省份等关键指标进行分析。 数据数据源&#xff1a;魔行观察&#xff1a;http://www.wmomo.com/#/brand/brandDetails?code10013603 品牌概览 蜜雪冰城是中国…...

如何在CSS中设置px值

在CSS中设置px&#xff08;像素&#xff09;值非常简单。px是CSS中最常用的长度单位之一&#xff0c;用于指定元素的大小、位置、间距等。 以下是一些示例&#xff0c;展示如何在CSS中使用px值&#xff1a; 设置元素宽度和高度 css复制代码 .box { width: 200px; /* 设置元素…...

【linux】find命令详解

Linux中的find命令用于在文件系统中搜索符合条件的文件或目录。 一.基本语法 find [path] [expression] #path:搜索的起始目录&#xff0c;如果不指定&#xff0c;默认为当前目录 #expression&#xff1a;定义搜索条件的表达式 命令选项 -name 按文件名搜索 -size …...

Android音频管理器探索与应用

在Android应用开发中&#xff0c;音频管理器是一个至关重要的组件&#xff0c;它负责处理设备的音频功能&#xff0c;包括音量控制、音频路由、音效处理以及与其他应用的音频交互。本文将深入探讨Android音频管理器的功能和应用&#xff0c;帮助开发者更好地理解和利用这一关键…...

qt QTreeWidget文件管理器拖入应用,从应用拖入文件管理器拷贝

我用QT实现了一个文件管理的软件&#xff0c;能够实现从桌面或其他路径拖拽文件到软件&#xff0c;软件获取拖拽文件的路径。但是当我想实现反向操作时遇到了问题。在网上搜索和阅读文档一天多都未能解决该问题。 下面给出我的实现&#xff1a; Qt开发中经常会用QTreeWidget去…...

Qt中使用MySQL数据库详解,好用的模块类封装

本文将详细介绍如何在Qt应用程序中集成MySQL数据库&#xff0c;并封装实现好用的mysql数据库操作类。包括环境准备、连接数据库、执行查询及异常处理等关键步骤&#xff0c;同时包含mysql驱动的编译。分享给有需要的小伙伴&#xff0c;喜欢的可以点击收藏。 目录 环境准备 项…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...