如何以正确的方式在 Nuxt 项目中添加 Vuepress？

Posted 2023-02-22

【中文标题】如何以正确的方式在 Nuxt 项目中添加 Vuepress？

【英文标题】：How to add Vuepress on a Nuxt project in a proper way?

【发布时间】：2019-11-05 19:40:03

【问题描述】：

我有我的 Nuxt 应用程序，我正在尝试在其上添加 Vuepress。 我做了yarn add vuepress@next -D 然后在其中创建了docs 文件夹和readme.md 文件。

问题：如果.vuepress文件夹在docs文件夹之外，项目只显示侧边栏和导航栏；如果它在里面，它将无法工作 - 不遵守 config.js 规则。

此外，它可以识别 Nuxt 应用程序中的 readme.md（也在 docs 文件夹之外），而不是 docs 文件夹中的那个。

谁能帮我解决这个问题？

另一个问题，如果上述方法可行，我是否可以通过 localhost:3000/docs 而不是 localhost:3000 访问 Nuxt 项目和 localhost:8080 访问文档？

这是我当前的文件夹结构（没有显示侧边栏 - 不尊重 .vuepress 文件夹中的 config.js）：

docs
  |__.vuepress
  |     |__config.js
  |
  |__guides

config.js 文件：

module.exports = 
  title: 'Documentation',
  description: 'Documentation',
  themeConfig: 
    sidebar: 'auto',
    nav: [
        text: 'Home',
        link: '/'
      ,
      
        text: 'Guides A',
        link: '/guides/apis/'
      ,
      
        text: 'item with subitems',
        items: [
            text: 'Subitem 01',
            link: '/'
          ,
          
            text: 'SubItem 02',
            link: '/'
          
        ]
      ,
      
        text: 'External',
        link: 'https://google.com'
      ,
    ]
  

Vuepress 版本 1.0.2

谢谢。

【参考方案1】：

为什么需要同时使用这两种方法？如果你使用 Nuxt，你实际上并不需要 VuePress。查看官方VuePress documentation。

Nuxt

Nuxt 能够做 VuePress 所做的事情，但它是为构建应用程序而设计的。 VuePress 专注于以内容为中心的静态网站，并提供为开箱即用的技术文档量身定制的功能。

【讨论】：

我确实需要它，因为 Vuepress 文档将由更多用户在 NetliftCMS 上编写。这就是为什么我的主要 Nuxt 应用程序会有一个 Vuepress 文档。

@FabioZanchi 因为你的用例很时髦，所以没有合适的方法

谢谢你们。我将为文档创建一个单独的项目。