【学习笔记之vue】vue项目放在springboot项目里后,刷新页面会显示whitelabel error page

vue项目放在springboot项目里后,刷新页面会显示whitelabel error page。
在这里插入图片描述

解决方案:
当你在Spring Boot项目中嵌入Vue项目,并且刷新页面时遇到了“Whitelabel Error Page”,这通常意味着Spring Boot后端没有正确地处理前端路由的请求。Vue.js是一个前端框架,它使用客户端路由,而Spring Boot是一个后端框架,它通常处理服务器端的路由。

这里有几个可能的原因和解决方案:

  1. 后端路由配置

    • 确保Spring Boot控制器正确地处理了所有必要的路由。
    • 如果Vue.js是单页应用(SPA),你可能需要配置一个通配符路由(例如,@RequestMapping("/{path:[^\\.]*}"))来捕获所有未匹配的路由,并返回Vue的index.html。这样,即使刷新页面,Vue路由器也可以接管并正确显示页面。
  2. 前端路由模式:(首选方案)

    • Vue.js默认使用history模式进行路由,这可能会导致刷新页面时出现问题。你可以尝试将路由模式更改为hash模式,这样即使刷新页面,URL中的哈希部分也会保持不变,Vue路由器可以正确解析。
    • 在Vue项目中,你可以在router/index.js中设置路由模式:
    javascript`const router = new VueRouter({mode: 'hash',// ...其他配置
    })`
    
  3. 静态资源配置

    • 确保Spring Boot正确地配置了静态资源的路径,以便可以访问Vue.js生成的index.html和其他静态文件。
    • 在Spring Boot的application.propertiesapplication.yml中,确保以下配置正确:
    properties`spring.resources.static-locations=classpath:/static/`
    
    • 这假设你的Vue.js生成的静态文件(如index.htmlmain.jsmain.css等)都放在src/main/resources/static目录下。
  4. 构建和部署

    • 确保在构建Vue项目时,所有的路由和资源都被正确地打包和放置在Spring Boot项目可以访问的位置。
    • 如果你使用的是Vue CLI进行构建,你可能需要配置publicPathbaseUrl来确保生成的资源路径正确。
  5. 浏览器控制台

    • 打开浏览器的开发者工具,查看控制台是否有任何错误或警告。这可能会提供关于为什么页面无法正确加载的更多信息。

通过检查上述方面并进行适当的调整,你应该能够解决在Spring Boot项目中嵌入Vue项目时遇到的“Whitelabel Error Page”问题。

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

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

相关文章

GitOps 和 DevOps 有什么区别?

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab :https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署…

nginx反向代理.NetCore开发的基于WebApi创建的gRPC服务

一、本文中使用的工具: Vs2022使用.NET 8.0开发基于ASP.NET Core WebApi的gRPC服务; Nginx:1.25.5,下载地址:http://nginx.org/en/download.html 二、gRPC介绍: 由 google 开发,是一款语言中立、平台中立、开源的远程过程调用(RPC)系统。在vs2022中可以直接创建gRP…

C语言趣味代码(二)

1.珠玑妙算 1.1 介绍 《珠玑妙算》(Mastermind)是英国Invicta公司于1973年开始销售的一款益智游戏,据说迄今为止已经在全世界销售了5000万套。《珠玑妙算》于1974年获奖后,在1975年传入美国,1976年leslieH.Autl博士甚至还出版了一本名为The…

leetcode多个测试用例之间相互影响导致提交失败

背景 在做一道easy题,二叉树的中序遍历,我提交的代码如下 from typing import (Optional,List )# Definition for a binary tree node. class TreeNode:def __init__(self, val0, leftNone, rightNone):self.val valself.left leftself.right right…

前端框架EXT.NET Dotnet 3.5开发的实验室信息管理系统(LIMS)成品源码 B/S架构

前端框架EXT.NET Dotnet 3.5开发的实验室信息管理系统(LIMS)成品源码 B/S架构 LIMS实验室管理系统 发展历史 实验室信息管理系统(LIMS),就是指通过计算机网络技术对实验的各种信息进行管理的计算机软、硬件系统。也就是将计算机网络技术与现…

使用LVGL提升交互效率:基于启明智显Model3A方案的7寸智能屏用户界面(UI)设计介绍

项目概述: 【启明智显】,作为一家专注于HMI和AIoT解决方案的公司,我们致力于为用户提供创新、可靠且高效的产品和解决方案。近日我们推出了高性能及高性价比的HMI芯片——Model3A。芯片搭载了强大的2D图形加速引擎,能够提供高达7…

这个合租室友真的没有一点公德心,还好他搬走了

这个合租室友真的没有一点公德心,还好他搬走了 这个出租屋有四个房间。 有三个卧室,和一个隔断。 我住三个卧室中的一个。下图中右边那个就是我住的。 2023年下半年,左边那个屋子来了一个新租户小白。 在住的过程中,隔断间的租…

C语言求 MD5 值

MD5值常被用于验证数据的完整性,嵌入式开发时经常用到。md5sum命令可以求MD5码,下面介绍如何用C语言实现MD5功能。 一、求字符串MD5值 1、md5sum命令 $ echo -n "12345678" | md5sum //获取"12345678"字符串的md5值 结果&…

STM32单片机C语言模块化编程实战:LED控制详解与示例

一、开发环境 硬件:正点原子探索者 V3 STM32F407 开发板 单片机:STM32F407ZGT6 Keil版本:5.32 STM32CubeMX版本:6.9.2 STM32Cube MCU Packges版本:STM32F4 V1.27.1 之前介绍了很多关于点灯的方法,比如…

机器学习——过拟合

一、过拟合得表现 模型在训练过程中,除了会出现过拟合现象,还有可能出现欠拟合的情况。相比而言,后者通常发生在建模前期,只要做好特征工程一般可以解决模型欠拟合问题。下图描述了模型在训练数据集上的三种情况: 其…

opencv_5_图像像素的算术操作

方法1:调用库函数 void ColorInvert::mat_operator(Mat& image) { Mat dst; Mat m Mat::zeros(image.size(), image.type()); m Scalar(2, 2, 2); multiply(image, m, dst); m1 Scalar(50,50, 50); //divide(image, m, dst); //add(im…

基于vue+node+mysql的视频校对系统

一、登录注册:包括登录,注册,忘记密码,验证码等常用点。 二、用户管理:包括用户的增删改查 三、权限管理(请增加这个权限:任务分配——只有管理者才能发布和删除任务;管理员设置。 四…

图论基础知识 深度优先(Depth First Search, 简称DFS),广度优先(Breathe First Search, 简称DFS)

图论基础知识 学习记录自代码随想录 dfs 与 bfs 区别 dfs是沿着一个方向去搜,不到黄河不回头,直到搜不下去了,再换方向(换方向的过程就涉及到了回溯)。 bfs是先把本节点所连接的所有节点遍历一遍,走到下…

每日一题:跳跃游戏II

给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - 1] 的最…

react —— useState 深入

基础用法 useState Hook 提供了这两个功能&#xff1a; State 变量 在第一次重新渲染期间&#xff0c;这将具有作为参数传递的值State setter 函数 set 函数将允许将状态的值更新为不同的值&#xff0c;如果 set 函数中提供的值不同&#xff0c;则将触发重新渲染。 注意&…

获取boss直聘城市地区josn数据

获取boss直聘城市地区josn数据 当我需要爬取多个城市的地区的时候&#xff0c;只能手动点击&#xff0c;然后一个一个看 结果&#xff1a; 能看到所有区域所有子地区的地区代码 解析该JSON数据 import pandas as pd import requests code[] area[] 城市代码101210100 res…

【Qt常用控件】—— 多元素控件

目录 1.1 List Widget 1.2 Table Widget 1.3 Tree Widget 1.4 小结 Qt 中提供的多元素控件有: QListWidget QListView QTableWidget QTableView QTreeWidget QTreeView xxWidget 和 xxView 之间的区别 以 QTableWidget 和 QTableView 为例&#xff1a; QTableView 是基于…

Oracle中rman使用记录

最近在项目中&#xff0c;遇到使用RMAN的操作来恢复数据库中某个时间归档日志&#xff0c;RMAN的原理和理解&#xff0c;网友们百度了解一下。我重点将实操部分了。直接上实验环节&#xff0c;让网友更懂。&#xff08;特别提醒&#xff1a;我是1:1用VMware克隆数据库进行RMAN还…

Mockito

小王学习录 依赖注解MockSpy静态方法单元测试InjectMocks 注解Captor 注解BeforeAll 和 BeforeEach的区别ParameterizedTestValueSourceEnumSourceCsvSourceMethodSource 打桩打桩方式打桩参数匹配方式 依赖 <!-- https://mvnrepository.com/artifact/org.mockito/mockito-i…

Armpro脱壳软件搭建教程附源代码

PHP8.0版本&#xff0c;数据库8.0版本 1.配置注册机文件&#xff0c;打开将arm.zip/res目录下&#xff0c;mt管理器搜索将其全部修改为你自己的域名或者是服务器IP 2.然后建立数据库 数据库账号arm 数据库用户名arm 数据库密码EsZfXY4tD3h2NNA4 3.导入数据库 4.配置Redi…