如何把VuePress制作的文档管理页面打包进现有的vue项目中？

VuePress简述

VuePress是Vue的作者开发的一套用于快速搭建静态网站的框架，其实从它的名字就可以看出来，如果你对WordPress比较熟悉的话。VuePress的强大之处在于它是以Markdown文档为核心的，如果你已经习惯于用Markdown来写作，而且想基于此搭建一个类似于博客或官方网站类的应用，那么你是时候登录一下VuePress的官方网站了解了一下了，你应该会有所收获！当然，其实开源世界里还有不少实现类似功能的项目，比如Nuxt，Hexo等，但正如有如此多的开发者投入到Vue的怀抱一样，你永远可以相信尤大，他的作品应该不会让你失望~~

好了，说了这些，但本文并不打算对VuePress的使用方法做过多的介绍，因为照着官方文档做很容易就能跑起来，唯独打包这部分我在使用的时候遇到点儿问题，因为我这边是希望在已有的项目里用VuePress搭建一个类似产品手册的东西，能够随我的项目打包的时候一起发布，但官方的文档关于build部分，要么是单独打包，要么是打包部署到github等应用上面。查了好些资料，总算能够跑通了，在此总结一下。

在已有Vue项目上的打包方法

1. 目录结构

在项目的根目录下创建docs目录，然后把VuePress相关的内容放置到该目录下。

2. package.json

可以在package.json文件中的scripts下面加入如下内容，方便打包使用，当然这个不是必须的。

    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"

3. 编辑config.js文件

config.js文件是VuePress的核心配置文件，相关选项在官方文档上有详细介绍。我们这里需要修改其中的如下选项：

• dest：指定文档打包后的路径，因为我们希望打包后能够和整个应用一起发布，所以配置到最外层的dist目录下，比如dist/docs
• base：即打包部署后访问文档应用的根路径，比如：/app/docs/，app是我们整个应用的的basePath，注意docs/后面的这个/很关键，否则会出现找不到页面的情况。

配置文件docs/.vuepress/config.js文件内容如下：

module.exports = {
    title: 'xxx用户手册',
    description: '一个基于VuePress打造的文档',
    dest: 'dist/docs',
    base: '/xxx/docs/',
    themeConfig: {
        nav: [
            { text: 'Home', link: '/' },
            { text: 'Guide', link: '/guide/' },
            {
                text: 'Language',
                ariaLabel: 'Language Menu',
                items: [
                { text: 'Chinese', link: '/language/chinese/' },
                { text: 'Japanese', link: '/language/japanese/' }
                ]
            }
        ]
    }
  }

4. 在应用内设置导航

在应用内的页面上找一个地方添加一个链接，比如我在登录页面login.vue上加了一个链接：

<a href="/xxx/docs/">用户手册</a>

OK，至此基本上就可以了，如果你还想在文档中返回主应用，那么还是在VuePress的config.js中进行配置。

5. 执行打包命令

先后执行如下命令进行整体的打包：

npm run build
npm run docs:build

然后，你就试试吧，有问题欢迎留言讨论~~