VuePress导航栏显示不全原因查找
原创大约 1 分钟
背景介绍
有一天心血来潮,想把博客放到github pages上,经过尝试,成功抵达彼岸。
但是,导航栏显示不全,经过排查最终找到原因。
开发环境
windwos10 + vscode + vuepress
原则上本次根因只跟windows系统有关
另外,我重写了vuepress的侧边栏功能和导航栏功能;主要是进行隐藏或者排序以及自动化生成
根因排查
排查步骤
- 确定github pages生成文件是否完成,经测试发现没有问题
- 确定github workflow配置node npnm版本是否和我本地一致,发现没有问题
- 最终调试发现是 windows路径
\\
和 linux/
环境的字符串拆分问题导致生成菜单异常。
根因修复
不知道如何修复是因为不知道为何出现的问题,根因找到修复就很容易。
修复代码
// 把\\替换为/`即可
// 原来为 files.push(file) , 没有考虑在linux环境下兼容的问题
files.push(file.replace(/\\/g, '/'))
总结
意想不到,情理之中;严谨!!!