vuepress2.0避坑指南

最近将公众号的文章进行了整理，用vuepress搭建了一个在线文档版的文章笔记，整体来说vuepress在线文档不管pc端还是移动端阅读体验是相当可以，我的在线文档是vuepress2.0搭的(vuepress2.0是vite构建)，无论本地打包还是本地服务是相当的快，从vuepress1.0到2.0升级过程遇到的一些问题，做了一些记录。

正文开始…

vuepress1.x

• 默认首页有左侧菜单栏

当我们设置一个默认自定义首页，然后开启左侧菜单栏时，此时首页也会出现左侧菜单栏

解决办法，主要是sidebar格式配置错误

错误配置

export const sidebar: Array<SidebarItem4Group> = [{title: 'js',collapsable: false,sidebarDepth: 3,children: [{title: '基础',children: [{title: '你不知道的循环中断',sidebarDepth: 3,path: '/front/js/2022-02-18'}]}]},
 ...
]; 

正确配置

export const sidebar = {'/front/js/': [{title: '基础',collapsable: true,children: ['', // js下的RADEME.md文件'2022-02-18']},{title: '进阶',collapsable: true,children: ['']}]
}; 

当你设置左侧菜单后，你想让右侧也出现一个内容进度导航，因此你可以设置subSidebar

• subSidebar 二级菜单

// 主题
module.export {themeConfig: {subSildebar: 'auto' // 或者生成二级菜单}
} 

但是发现右侧内容导航fixed却始终失效了，一顿排查

• 右侧二级目录fixed失效问题

由于父级元素设置transfrom:translateY(0)产生堆叠上下文，因此需要重置.page样式

// styles/palette.styl
.page {transform: none !important;
} 

vuepress中markdown文件引入第三方cdn图片403错误

由于我们vuepress本地服务把当前本站的referrer带给了cdn图片请求，第三方发现不是本站的请求，所以直接403错误

在config.ts中添加meta标签

export default defineConfig({...head: [['meta',{name: 'referrer',content: 'no-referrer'}]],...
}); 

此图片来自微信公众平台未经允许不可引用

如果图片是微信公众号文章后台上传的，偶现图片显示不出来 需要添加meta

// /docs/.vuepress/configs/head/index.ts
...
 ['meta',{'data-draft-node': 'block','data-draft-type': 'table','data-size': 'normal','data-row-style': 'normal'}] 

定义全局组件

主要是在.vuepress新建components，内部组件会自动根据文件名注册成全局组件，比如下面两个类似的组件

|---components|---glob|---text.vue|---Hello.vue 

在markdown文件中就可以直接使用了

* 这是一个全局注册的组件
<Hello />
<glob-text /> 

pwa

主要在离线状态下，如果断网了，依然可以正常访问应用 参照官方