vuepress 打包后左侧菜单链接 404 问题解决办法

背景

上周看到一本开源书 《深入架构原理与实践》,是基于 vuepress 搭建的,下载了源码,本地部署了一下,本文记录如何打包该源码遇到的路径问题及思考。

结论: vuepress 插件的 sideBar 的菜单路径默认是相对 / 的,并且是由 .vuepress/config.jsbase 属性控制,打包时需要按需要修改,开发环境下不能设置

环境准备

  1. node 18.0.0,版本过低的话,需要先安装版本管理工具 n ,再执行 n 18.0.0 安装合适的版本。
  2. yarn
  3. Tomcat
  4. Git

下载源码,执行安装和打包操作:

  1. git clone https://github.com/isno/theByteBook.git && cd theByteBook
  2. yarn install
  3. yarn dev
  4. yarn build

直接用源码打包后在 .vuepress 目录下生成 dist 文件夹,就是开源书《深入架构原理与实践》的静态资源。

应用部署

该项目默认的静态文件路径是相对于 / 的,直接将 build 后的静态目录 dist 放到 tomcat/webapps 下访问,会出现 404,页面的静态资源路径都不正确,有两种解决方法。

第一种,直接把 dist 重命名为 ROOT ,作为 tomcat 的根应用后,就能正常访问了。
在这里插入图片描述
第二种,修改 vue 打包路径的 publicpath 和 vuepress 配置的 base 属性。

第一步,在工程的根目录、与 package.json 同级别的目录下,创建一个名为 vue.config.js 的打包配置文件,输入配置内容:

module.exports = {publicpath: './',assetsdir: 'static',parallel: false
}

第二步,进入 .vuepress 目录,修改 config.js 在配置开头添加一个 base 属性,感谢《这篇文章》 的启发,试了一下果然可以。
在这里插入图片描述

重新执行 yarn build 打包后,直接将 dist 放到 tomcat 的 webapps 下访问首页正常:
在这里插入图片描述

个人思考

第一点,是关于 vuepress 插件的,它配置的 sideBar 的菜单路径默认是相对 / 的,它是由 .vuepress/config.jsbase 属性控制的:
在这里插入图片描述

如果应用部署的时候不是 ROOT 根目录的话,就需要配置这个路径与发布的应用目录名称一致,这里是 dist :
在这里插入图片描述
第二点,用 vuepress 搭建个人博客还是挺不错的,一个配置文件就搞定了,只需要专注编写内容的 md 文件,想到一个用途就是用它来搭建知识文档库。

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

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

相关文章

FPGA高端项目:图像缩放+GTP+UDP架构,高速接口以太网视频传输,提供2套工程源码加QT上位机源码和技术支持

目录 1、前言免责声明本项目特点 2、相关方案推荐我这里已有的 GT 高速接口解决方案我这里已有的以太网方案我这里已有的图像处理方案 3、设计思路框架设计框图视频源选择ADV7611 解码芯片配置及采集动态彩条跨时钟FIFO图像缩放模块详解设计框图代码框图2种插值算法的整合与选择…

【Java 进阶篇】MVC 模式

欢迎来到本篇详细解释 MVC(Model-View-Controller)设计模式的教程。MVC 是一种用于组织应用程序的设计模式,有助于将应用程序分成不同的部分,以提高代码的可维护性和可扩展性。在本文中,我们将深入研究 MVC 模式&#…

Vue的详细知识点梳理

Vue.js是一个渐进式的JavaScript框架,被设计用来构建用户界面。 Vue.js的详细知识点梳理: Vue.js的基本特性:包括响应式数据绑定、组件化、模板语法等。 Vue的生命周期:包括创建前、创建、挂载、更新、销毁等阶段,每个阶段都有相应的钩子函数可以使用。 Vue的指令:包括…

SpringBoot整合定时任务遇到的多实例问题

唠嗑部分 是这样,前几日完善了定时任务的日志记录,今日切换了服务器,多部署了一个节点,使用nginx负载均衡,但是查看日志却发现了如下情况 那糟糕了,传说中的多实例问题出现了,今天我们就来聊聊…

stable diffusion安装踩坑之clip安装、git报错

clip本地安装环境链接问题 本节主要记录一下在windows安装stable diffusion时,clip脚本安装不上,本地安装时如何链接到当前库的问题 首先,在脚本安装clip不成功时,脚本会输出一个commend指令,复制到浏览器就可以很快…

虚幻引擎 5.1 中全新的增强型输入操作系统

教程链接 https://www.youtube.com/watch?vCYiHNbAIp4s 前提 虚幻引擎5.1之后,项目设置里的input选项,默认会有一条警告,告知旧的input系统已经不能用了。 做法 在content文件夹下新建一个input按钮 input文件夹里面分成两部分内容 1.…

【ARMv8 SIMD和浮点指令编程】浮点加减乘除指令——四则运算

浮点指令有专门的加减乘除四则运算指令,比如 FADD、FSUB、FMUL、FDIV 等。 1 FADD (scalar) 浮点加法(标量)。该指令将两个源 SIMD&FP 寄存器的浮点值相加,并将结果写入目标 SIMD&FP 寄存器。 该指令可以产生浮点异常。根据 FPCR 中的设置,异常会导致在 FPSR 中…

Ansible的role

环境 控制节点:Ubuntu 22.04Ansible 2.10.8管理节点:CentOS 8 role 目录结构 role的文件结构中,包含了8个标准目录: taskshandlerstemplatesfilesvarsdefaultsmetalibrary 例如,下面是 common 这个role的目录结构…

抖音小店从0到1起店流程,实操经验分享!

我是电商珠珠 很多人在开店之后,并不知道怎么做。往往会有人跑来问我说,开店之后怎么做啊,流程方面我还不是很熟悉啊等等。 这份起店流程备好了,将来对你有用。 第一步,店铺基础设置 在店铺开好之后,不…

Python图像处理之OpenCV模块

Python图像处理 1、OpenCV模块简介2、OpenCV模块图像常用操作3、PIL与OpenCV图像格式转换4、图像识别应用案例4.1、人脸识别4.2、车牌识别4.3、文本识别1、OpenCV模块简介 OpenCV(Open Source Computer Vision Library)是一个基于BSD许可(开源)发行的跨平台计算机视觉库,主…

Pytest系列(16)- 分布式测试插件之pytest-xdist的详细使用

前言 平常我们功能测试用例非常多时,比如有1千条用例,假设每个用例执行需要1分钟,如果单个测试人员执行需要1000分钟才能跑完当项目非常紧急时,会需要协调多个测试资源来把任务分成两部分,于是执行时间缩短一半&#…

AVL树性质和实现

AVL树 AVL是两名俄罗斯数学家的名字,以此纪念 与二叉搜索树的区别 AVL树在二叉搜索树的基础上增加了新的限制:需要时刻保证每个树中每个结点的左右子树高度之差的绝对值不超过1 因此,当向树中插入新结点后,即可降低树的高度&…

Leetcode2909. 元素和最小的山形三元组 II

Every day a Leetcode 题目来源:2909. 元素和最小的山形三元组 II 解法1:枚举 前后缀分解 定义 preMin[i] 为前缀最小值,初始化 preMin[0] nums[0],递推公式:preMin[i] min(preMin[i - 1], nums[i])。 定义 suf…

InSAR 滤波算法

目录 1.InSAR 滤波原理 2.InSAR 滤波算法 2.1 均值滤波 2.2 Goldstein 滤波 2.3 改进的Goldstein 滤波 2.4 精致 Lee 滤波 2.5 小波滤波2.6 NL-InSAR 滤波 2.7 InSAR-BM3D 滤波 3.参考文献 本文由CSDN点云侠原创,爬虫网站请自重。 InSAR 滤波是InSAR 技术处理中的一…

rviz添加qt插件

一、增加rviz plugin插件 资料:http://admin.guyuehome.com/42336 https://blog.51cto.com/u_13625033/6126970 这部分代码只是将上面两个链接中的代码整合在了一起,整合在一起后可以更好的理解其中的关系 1、创建软件包 catkin_create_pkg rviz_tel…

【MySQL】查询语句

文章目录 选择语句 / 子句比较运算符AND,OR,NOT运算符IN运算符BETWEEN运算符LIKE运算符REGEXP运算符 选择语句 / 子句 USE:选择使用的databaseSELECT:选择查询的列FROM:选择查询的表WHERE:条件查询ORDER B…

IntelliJ IDEA 如何修改默认Maven仓库地址

在使用idea过程中,每次新建项目或者打开项目时,maven仓库地址都会变为默认地址。如何修改默认地址,让其保持不变,如下这种方式可以简单快捷的设置。 1.打开idea,取消项目自动加载 2.点击 Customize,然后再点击 All se…

DeepLearning - 余弦退火热重启学习率 CosineAnnealingWarmRestartsLR

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/134249925 CosineAnnealingWarmRestartsLR,即 余弦退火热重启学习率,周期性修改学习率的下降和上升,间隔幅度逐…

K7系列FPGA进行FLASH读写1——CCLK控制(STARTUPE2原语)

最近的工作涉及对 FPGA 进行远程更新,也就是通过远程通信接口将 .bin 文件送到 FPGA,然后写入 FLASH,这样当 FPGA 重新上电后就可以执行更新后的程序了。因此第一步工作就是进行 FLASH 的读写控制。 然而如果尝试配置 FLASH 管脚时&#xff0…

Android Datastore 动态创建与源码解析

涉及到的知识点 1、协程原理---->很好的博客介绍,一个小故事讲明白进程、线程、Kotlin 协程到底啥关系? 2、Channel知识点---->Android—kotlin-Channel超详细讲解 3、Coroutines : CompletableDeferred and structured concurrency 封装的DataS…