【Vue3+Vite】解决build后空白页的问题

目录

Hash 模式

HTML5 模式(历史模式) 

配置Nginx  

配置Spring Boot 


Hash 模式

build后空白页的问题可能是使用的是历史模式,因为Vue是一个单页的客户端应用,如果没有适当的服务器配置,访问会得到一个 404 错误。使用Hash模式接口解决这个问题,因为使用Hash模式后由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。缺点就是对SEO不友好。

配置: 

import { createRouter, createWebHashHistory } from 'vue-router'const router = createRouter({history: createWebHashHistory(),routes: [//...],
})

HTML5 模式(历史模式) 

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(),routes: [//...],
})

使用这个模式需要另外配置下服务器,你可能会在Nginx中使用或者是Spring Boot中使用。

配置Nginx  

location / {try_files $uri $uri/ /index.html;
}
  • location /:指定对根路径 / 的请求处理规则。
  • try_files $uri $uri/ /index.html:尝试按顺序查找和服务文件。
    1. $uri:尝试直接访问请求的 URI 对应的文件。
    2. $uri/:如果第一步找不到文件,尝试将 URI 当作目录处理。
    3. /index.html:如果以上两步都失败,最后尝试服务 index.html 文件。

简而言之,这个配置首先尝试直接响应请求的文件,如果文件不存在则尝试作为目录处理,最后如果都不成功,则显示 index.html。这常用于单页面应用(SPA),确保所有路径最终都指向同一个 HTML 文件。

Nginx官方文档的解释:

Serving Static Content | NGINX Documentation 

配置Spring Boot 

Spring Boot只需要将build后的文件放在resources\static位置下即可。

 添加一个controller:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class RouteController {@RequestMapping(value = "/{path:[^\\.]*}")public String redirect() {return "forward:/index.html";}
}

参考:

java - Configure Spring Boot for SPA frontend - Stack Overflow 

这个配置和Nginx配置的作用很相似,都是将不存在的路径请求到index.html。假如你的vue路由配置了一个path为/test,你的spring boot应用也有一个/test的接口,那么会优先访问spring boot中的接口。还有另外一个问题是如果你有嵌套路由,直接在浏览器中输入嵌套路由的请求路径会报错。但不会影响页面当中的嵌套路由跳转。

如果你的spring boot进行了上面的操作后还是没法访问,只需配置拦截器的白名单后即可。如:


👍点赞,你的认可是我创作的动力 !
🌟收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【研究中2】sql server权限用户设置

--更新时间2023.11.26 21:30 负责人:jerrysuse DBAliCMSIF EXISTS (select * from sysobjects where namehkcms_admin)--判断是否存在此表DROP TABLE hkcms_adminCREATE TABLE hkcms_admin (id int identity(1, 1),--id int primary key identity…

静态路由配置过程

静态路由 静态路由简介 路由器在转发数据时,要先在路由表(Routing Table)中在找相应的路由,才能知道数据包应该从哪个端口转发出去。路由器建立路由表基本上有以下三种途径。 (1)直连路由:路由…

HDMI接口信号流向及原理图分析

1、HDMI的来源及发展 如今显示器上最常用的接口无非HDMI(High Definition Multimedia Interface)与DP(DisplayPort)两种,VGA与DVI已经很少使用,原因在于VGA传输的是模拟信号,在发送端需要将数字…

C++前缀和算法:统计美丽子字符串

题目 给你一个字符串 s 和一个正整数 k 。 用 vowels 和 consonants 分别表示字符串中元音字母和辅音字母的数量。 如果某个字符串满足以下条件,则称其为 美丽字符串 : vowels consonants,即元音字母和辅音字母的数量相等。 (vowels * cons…

Jenkins与Docker的自动化CI/CD流水线实践

Pipeline 有诸多优点,例如: 项目发布可视化,明确阶段,方便处理问题 一个Jenkins File文件管理整个项目生命周期 Jenkins File可以放到项目代码中版本管理 Jenkins管理界面 操作实例:Pipeline的简单使用 这里是比较…

设计模式-迭代器模式

定义 迭代器模式是一种行为型设计模式,它提供一种按顺序访问聚合对象中的元素的方法,而又无须暴露聚合对象的内部表示。迭代器模式通过将集合对象的迭代行为抽象到迭代器中,提供一致的接口,使得不同的容器可以提供一致的遍历行为…

elastic -job和springboot集成实现分布式调度5

一 案例介绍说明 1.1 案例介绍 基于 Spring boot 集成方式的而产出的工程代码,完成对作业分片的实现,文件数据备份采取更接近真实项目的数 据库存取方式。 1.分片设置 2.每个线程获取给自的类型 1.2 作业配置 zk的配置 二 操作说明 2.1 数据表的初始…

深入理解计算机中的程序

目录 程序的存储 程序的编译过程 各位宝宝好&#xff0c;我们这次从计算机底层来讲一下程序是如何存储&#xff0c;编译的 程序的存储 我们拿一个最简单的程序来举个例子&#xff1a; #include<stdio.h> int main() {printf("hello world");return 0; } …

类与对象(下)

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生&#x1f43b;‍❄个人主页&#x1f389;&#xff1a;GOTXX&#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&a…

设计模式精讲:掌握单例模式的实现与优化

掌握单例模式的实现与优化 一、引言&#xff1a;如何学习设计模式&#xff1f;二、前置知识&#xff1a;对象的创建的销毁2.1、拷贝构造2.2、拷贝赋值构造2.3、移动构造2.4、移动赋值构造 三、单例模式的定义四、单例模式的实现与优化4.1、版本一4.2、版本二4.3、版本三4.4、版…

TypeScript中的“as”语法是什么?

在TypeScript中&#xff0c;as是一种类型断言的语法。它用于告诉编译器某个值的类型&#xff0c;并强制将其视为指定的类型。这可以用于处理类型检查无法确定的情况&#xff0c;或者在开发者明确知道某个值的类型时。 as语法可以在以下情况下使用&#xff1a; 当开发者确定某…

ros2智能小车中STM32地盘需要用到PWM的模块

我做的地盘比较简单&#xff0c;使用了一下模块&#xff1a; 4个直流减速电机&#xff0c;&#xff08;每个模块用到了一个PWM&#xff09;---这会通过L298N的ENA,ENB来实现控制 光电对射测速模块&#xff08;不用PWM) 超声波测距模块&#xff08;不用PWM&#xff0c;只需要…

传统数仓和clickhouse对比

背景 传统数仓一般都是HiveSparkSql作为代表&#xff0c;不过也包括Kylin等&#xff0c;而clickhouse是实时OLAP的代表&#xff0c;我们简单看下他们的对比 传统数仓和clickhouse对比 HiveSparkSQL的传统数仓&#xff1a; 1.数据更新速度慢&#xff0c;由于传统数仓一般都是…

靡靡之音 天籁之声 ——Adobe Audition

上一期讲到了和Pr配合使用的字幕插件Arctime Pro的相关介绍。相信还记得的小伙伴应该记得我还提到过一个软件叫做Au。 当人们对字幕需求的逐渐满足&#xff0c;我们便开始追求更高层次的享受&#xff0c;当视觉享受在进步&#xff0c;听觉享受想必也不能被落下&#xff01; Au即…

NX二次开发UF_CURVE_ask_offset_parms 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_offset_parms Defined in: uf_curve.h int UF_CURVE_ask_offset_parms(tag_t offset_curve_object, UF_CURVE_offset_data_p_t offset_data_pointer ) overview 概述 …

什么是好的FPGA编码风格?(3)--尽量不要使用锁存器Latch

前言 在FPGA设计中&#xff0c;几乎没人会主动使用锁存器Latch&#xff0c;但有时候不知不觉中你的设计莫名其妙地就生成了一堆Latch&#xff0c;而这些Latch可能会给你带来巨大的麻烦。 什么是锁存器Latch&#xff1f; Latch&#xff0c;锁存器&#xff0c;一种可以存储电路…

Spring Boot 项目配置文件出现乱码的解决方法

如下图&#xff0c;我们 Spring Boot 项目的配置文件 application.properties 可能会出现如下的乱码问题&#xff1a; 我们写注解的时候是正常的&#xff0c;但是下次启动项目就出现了乱码&#xff0c;这个是字符集设置的问题 解决方法 1.点击 File 选择 Settings 2.搜索 enco…

Grabcut算法在图片分割中的应用

GrabCut算法原理 Grabcut是基于图割(graph cut)实现的图像分割算法&#xff0c;它需要用户输入一个bounding box作为分割目标位置&#xff0c;实现对目标与背景的分离/分割&#xff0c;与KMeans与MeanShift等图像分割方法不同。 Grabcut分割速度快&#xff0c;效果好&#xff0…

stm32 42步进电机 上位机示例

脉冲到底是个啥东西&#xff1f;步进电机一直说发脉冲 步进电机通过接收脉冲信号来实现精确的位置控制。脉冲是一种短暂的电信号&#xff0c;它的变化可以触发步进电机转动一定的角度或步进。步进电机控制系统会根据输入的脉冲信号来精确定位和控制步进电机的转动&#xff0c;每…

YOLOv8 训练自己的分割数据集

之前写过一篇 使用YOLOv8训练自己的【目标检测】数据集-【收集数据集】-【标注数据集】-【划分数据集】-【配置训练环境】-【训练模型】-【评估模型】-【导出模型】&#xff0c;里面带大家整个流程走过一遍了&#xff0c; 这篇文章我们来介绍如何使用 YOLOv8 训练分割数据集&a…