Skip to content

使用 vitepress 遇到的一些坑

按照文档配置侧边栏浏览器报错

TIP

2022/06/05「此问题已被官方已解决」

文档里是这样写的:

js
export default {
  themeConfig: {
    sidebar: {
      // This sidebar gets displayed when user is
      // under `guide` directory.
      '/guide/': {
        text: 'Guide',
        items: [
          // This shows `/guide/index.md` page.
          { text: 'Index', link: '/guide/' }, // /guide/index.md
          { text: 'One', link: '/guide/one' }, // /guide/one.md
          { text: 'Two', link: '/guide/two' }, // /guide/two.md
        ],
      },
    },
  },
}

如果按照文档写法来进行操作的话,会导致浏览器报错。

sidebar.js:23 Uncaught (in promise) TypeError: sidebar is not iterable
    at getFlatSideBarLinks (sidebar.js:23:25)
    at ReactiveEffect.fn (prev-next.js:9:28)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at get value [as value] (reactivity.esm-bundler.js:1144:39)
    at unref (reactivity.esm-bundler.js:1052:29)
    at Object.get (reactivity.esm-bundler.js:1055:37)
    at Proxy._sfc_render (VPDocFooter.vue:17:17)
    at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5646:34)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)

这里其实需要一个数组,稍加改造就不会报错了:

js
export default {
  themeConfig: {
    sidebar: {
      // This sidebar gets displayed when user is
      // under `guide` directory.
      '/guide/': [
        {
          text: 'Guide',
          items: [
            // This shows `/guide/index.md` page.
            { text: 'Index', link: '/guide/' }, // /guide/index.md
            { text: 'One', link: '/guide/one' }, // /guide/one.md
            { text: 'Two', link: '/guide/two' }, // /guide/two.md
          ],
        },
      ],
    },
  },
}