vuepress使用中遇到的问题

2019年07月23日Web前端

一直想找个可以简单写写文档,知识点内容的静态博客,对比gitbook和vuepressh后,觉得gitbook太偏向文档,vuepress的灵活性更大,所以选择了vuepress(还可以直接使用vue component)。 在使用较为强大的vue组件功能的时候,遇到了一些小坑。

热更新

使用 vuepress dev docs 命令,修改config.js不能热更新,修改其他md文件可以实现热更新。

组件使用

组件均位于docs/.vuepress/components下,启动服务后,vuepress会默认将这些组件进行注册。

假如现在有一个test组件,我们需要在md文件中引用他,可以使用标签的方式引用,

需要注意的是标签前的空格不能大于等于4个,否则标签会失效(包在clientonly标签中也算)。

config.js中配置README文件

config.js是vuepress的整体配置界面,当配置侧边栏时,我们需要写下对应的文件的路径,当展示的md文件中有README文件时,不能将README文件名写出(留空就行),否则会报错:

[vuepress] No matching page found for sidebar item "/README.md"
Rendering page: /demo1/[vuepress] No matching page found for sidebar item "/demo1/README.md"

比如:docs文件夹下有一个README和demo1文件夹,demo1文件夹下有个README.md。sidebar中配置要写出如下:

sidebar: {
    "/": [
        ""   // not "README.md"
    ],
    "/demo1/": [
        ["/demo1/", "demo1"],     // not ["/demo1/README.md", "demo1"]
    ],
}

组件打包error

在md文件中加入组件的使用后,例如,

<test />

表现为以下两种情况:

  1. build会出现报错,render function or template not defined in component: 某某组件名称。
  2. dev或build后的文件启服务后,正常点击访问可以,但是F5刷新就会出现404。

处理方法

在组件引用外层增加clientOnly标签即可。

<ClientOnly>
  <test />
</ClientOnly>

注:需要时请配合ctrl+F5清缓存使用(每次启服务,不知道那来那么多缓存的)。

详细代码:github