vuepress使用中遇到的问题

2019年07月23日Web前端0

一直想找个可以简单写写文档，知识点内容的静态博客，对比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。

vuePress

目录