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 github.com/isno/theByt... && 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 的打包配置文件,输入配置内容:

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 文件,想到一个用途就是用它来搭建知识文档库。

相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
王王碎冰冰14 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼15 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安16 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队16 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好16 小时前
pinia从定义到运用
前端·vue.js
代码小学僧16 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜17 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥20 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT1 天前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js