当前位置: 首页 > 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;喜欢的可以点击收藏。 目录 环境准备 项…...

浏览器 Profile 环境排查:Cookie、LocalStorage、网络出口与自动化任务配置清单

一、为什么浏览器环境经常“今天能用&#xff0c;明天失效”很多团队遇到登录状态丢失、页面配置异常、自动化任务失败时&#xff0c;会先怀疑网络、脚本或系统本身。但在实际项目里&#xff0c;问题经常不是单点故障&#xff0c;而是浏览器环境缺少稳定管理&#xff1a;对象常…...

《我看见的世界:李飞飞自传》第1-6章阅读笔记:从移民少女到AI教母的“看见“之旅

前言 当我们谈论人工智能时&#xff0c;我们谈论的是算法、数据、算力&#xff0c;是那些冰冷的代码和复杂的模型。但在《我看见的世界&#xff1a;李飞飞自传》中&#xff0c;李飞飞用她独特的视角告诉我们&#xff1a;AI的本质&#xff0c;是人类对"看见"世界的渴望…...

MeloTTS实战:多语言语音合成的高效解决方案

MeloTTS实战&#xff1a;多语言语音合成的高效解决方案 【免费下载链接】MeloTTS High-quality multi-lingual text-to-speech library by MyShell.ai. Support English, Spanish, French, Chinese, Japanese and Korean. 项目地址: https://gitcode.com/GitHub_Trending/me/…...

AWS DevOps Agent 完全指南

AWS DevOps Agent 是 AWS 推出的前沿 AI 运维代理,自主调查和解决事件、持续预防故障、提升系统可靠性。本文档覆盖从原理到实战的全生命周期管理。 一、定位与价值 一句话定义 AWS DevOps Agent = AI 驱动的 SRE 队友,724 自主调查告警、定位根因、生成修复方案、预防未来…...

猫抓浏览器扩展终极指南:5分钟掌握全网视频资源下载技巧

猫抓浏览器扩展终极指南&#xff1a;5分钟掌握全网视频资源下载技巧 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否经常遇到心仪的视频无法…...

Xia Sql插件:可调试的SQL注入决策引擎

1. 这不是又一个“自动扫SQL”的插件&#xff0c;而是把渗透工程师的判断逻辑塞进了Burp里你有没有过这种经历&#xff1a;在Burp Proxy里看着一堆GET参数、POST JSON、Cookie字段&#xff0c;心里清楚“这里大概率能注入”&#xff0c;但手动拼payload试了七八轮&#xff0c;还…...

从数据到模型:手把手教你预处理MPIIFaceGaze和EyeDiap数据集(Python实战)

从数据到模型&#xff1a;手把手教你预处理MPIIFaceGaze和EyeDiap数据集&#xff08;Python实战&#xff09;当你第一次打开MPIIFaceGaze或EyeDiap数据集的压缩包时&#xff0c;那种面对杂乱文件夹和神秘.mat文件的迷茫感&#xff0c;我太熟悉了。作为计算机视觉工程师&#xf…...

D2DX如何让暗黑破坏神2在4K显示器上流畅运行:5个关键技术解析

D2DX如何让暗黑破坏神2在4K显示器上流畅运行&#xff1a;5个关键技术解析 【免费下载链接】d2dx D2DX is a complete solution to make Diablo II run well on modern PCs, with high fps and better resolutions. 项目地址: https://gitcode.com/gh_mirrors/d2/d2dx 当…...

C语言预处理指令全解析

第六章 预处理命令在c语言中&#xff0c;所有# 开头的指令&#xff0c;被称为预处理指令。gcc 编译预处理 所有的预处理指令&#xff0c;都要在这步处理完汇编编译连接#include包含头文件。 全局变量的声明&#xff0c;函数的声明&#xff0c; 自定义构造类型声明&#xff0c; …...

【Midjourney霓虹效果终极指南】:20年AI视觉工程师亲授5大参数组合+3类光源建模公式,97%新手一周内复刻赛博朋克海报

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;霓虹美学的视觉原理与Midjourney适配性解析 霓虹美学源于20世纪都市夜景中的荧光灯管、电子广告与赛博朋克文化&#xff0c;其核心视觉特征包括高饱和度冷暖对比、边缘辉光&#xff08;glow&#xff09;、深色…...