vuepress 的组件导入第三方组件,出现 anonymous 错误

3/21/2021 vuepressvue

# 问题现象

在使用独立布局的组件中,如果引入了其它的组件(import xxx from xxx),则在 build 时可能会保存,错误为:

vuepress render function or template not defined in component: anonymous

---
title: 独立布局的页面
layout: legacy-LegacyApp
---

<ClientOnly>
  <legacy-LegacyApp></legacy-LegacyApp>
</ClientOnly>

PS 这个独立布局的组件名为 LegacyApp,在子目录下,即目录结果为 .vuepress/components/legacy/LegacyApp.vue

关于子目录中组件查找的问题,参考:

自建vue组件 air-ui (9) -- 用 vuepress 写文档 (opens new window)

这边要注意一个细节就是查找 button-demo-base 对应的 vue 文件的时候, vuepress 会先将 button-demo-base 字符串按照中划线-分成三个单词 button, demo, base,  接下来的检索模式就是去找 .vuepress/components/ 目录下:

先优先在该目录下找 button 目录下的 demo 目录下的 base.vue
如果找不到,再找 button 目录下的 demo-base.vue
如果再找不到,最后找 button-demo-base.vue

# 处理方法

实现,检查是否使用了 ClientOnly,没有的话需要加上。

enhanceApp.js 中,使用如下方式导入组件:

export default ({
    Vue, options, router 
}) => {

    import('xxx').then(function (m) {
      Vue.use(m.default)
    });
}

解决方法来源: 用 VuePress 开发组件库文档踩坑总结 | 9935 (opens new window)

在 Markdown 中 使用 Vue | VuePress (opens new window)

# 其它的问题

如果 vuepress 重新定义了 base 路径,则上面提到的独立布局的组件,其中的超链接跳转可能不会自动加上 base 路径,需要自己处理。

关于 base 的说明: 配置 | VuePress (opens new window)

具体如何处理?我是使用 vuex 定义 base 路径,然后在需要的地方手动为 url 添加上 base 路径。

更新时间: Sunday, March 21, 2021 20:54