vuepress2站点部署及怎么做登录控制

       百家饭团队开发的百家饭OpenAPI平台是用vuepress2.0搭建的，搭建的时候不知道2.0还处在beta状态，所以导致后来踩了一些坑，使用过程中vuepress2.0也从2.0.0-beta.18升到了2.0.0-beta.48，有很多的变化，所以想写一个教程介绍一下vuepress2.0的情况以及使用经验。

大致计划写这些内容吧：

1. vuepress介绍、选型原因及使用感受（先介绍一下自己用的情况吧）
2. vuepress2.0使用（搭建一个vuepress支撑的网站）-第一部分
3. vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置
4. vuepress2.0使用（搭建一个vuepress支撑的网站）-详细配置默认模板
5. vuepress2.0使用（搭建一个vuepress支撑的网站）-md文件的玩法
6. vuepress2.0使用（扩展默认主题）- 准备及扩展页面组件
7. vuepress2.0使用（扩展默认主题）- 提供更多页面模板并引入ElementUI
8. vuepress2.0使用（扩展默认主题）- 扩展MD页面功能（Section扩展及自定义语法）
9. vuepress2.0使用（扩展默认主题）- 引入百度搜索支持及其他库的引用
10. 编写vuepress主题（自定义自己的框架，开发复杂程序）
11. vuepress2.0使用——编译及站点部署
12. vuepress2.0当前的状态（版本变化，方便大家升级，占位中，未书写）
13. 更多读者发起话题点击这里进专题查看，就不更新标题了

这里先给搜索进来的同学提个醒：凡是网上搜索到需要修改clientAppEnhance.js 文件的教程都已经过时，最新版本已不再使用。另外说个题外话，我查了下，我为数不多的搜索关键词里面，vuepress的占了大部分，这里感谢大家的关注，这个教程肯定有不合理的地方，如果有任何需要帮助的，大家都可以留言，我尽力解答。

​

这篇文章就来源自一个读者的提问，于是才想起来光讲了怎么写，没讲怎么部署，所以这章补上。

Vuepress2的编译部署

当我们完成了vuepress本地化的编辑工作后，就可以部署我们的博客站点了，这里要说明一下，vuepress2其实是个静态网站生成器，相当于给了我们一个模板，让我们填内容，填好内容后，通过调用

yarn vuepress build

完成站点的编译，编译结果是一大堆和md对应的html文件和对应需要的js，css，图片等辅助文件

这些就是静态的页面内容。通过将这些内容上传到静态网站托管服务器上，就可以完成对应的部署工作，常见的有

1. github、gitee等提供的静态页面托管功能
2. 阿里云、腾讯云等云服务器提供商提供的静态站点托管功能（通常比直接买个虚拟机便宜）
3. docker云提供商提供的轻量云解决方案
4. 自建服务器
5. 通过动态域名方案映射架设在自家路由上（纯供学习） 

部署后要注意什么？

建设完成之后，大家通过域名或者ip应该就可以访问到我们的内容了，这个时候有用到各类第三方类库的同学们记得逐一检查各个页面，看看是否有错位和内容错误的情况，通常这种情况都是由于SSR导致的，我们需要检查出错的部分，然后通过将对应的模块用<ClientOnly>包裹来达到排除错误的目的，这种错在本地不会出现，只能部署后排查，这也是vuepress使用中比较大的一个坑了。

百家饭的顶部菜单就使用了ClientOnly包裹，否则会有错误、错误压缩等问题。

解决登录问题

完成了上述的操作后，我们来解决一下这个读者的问题，首先其实我想知道的是：

为什么要做登录控制

这个小伙伴没有回答我的问题，所以我大概想了下，可能有这么几种：

1）有功能页面需要做登录后服务或希望通过登录和用户进行互动

3）希望对页面本身做登录限制

情况1：为功能页面配置登录服务

有功能页面需要做登录这种其实好处理，和Vue的模式是一样的，我们需要开发独立的后台程序，通过ajax接口和页面内的js函数进行配合，实现登录功能和登录后检查。我们的百家饭平台就是这么做的。

这时，登录面板等可以作为组件在md文件中以html模块的形式，引用使用或者在模板中引用使用，参考第十章。

如果想把登录用户的信息在页面进行展示的话，推荐在模块里面处理好后，放入themeData里面，然后在页面中，通过$theme来获取使用，同样在第十章，我们讲到了具体的用法，另外vuepress还有多个可以在md中使用的参数，下面的两个，个人认为如果有数据需求，也可以通过在模板中修改，并在页面中通过名称引用来使用。

1. $frontmatter: 页面数据的 `frontmatter` 属性，可以在模块中使用usePageFrontmatter获得并进行修改，如果是页面级别的数据可以考虑放在这里。

2. $page: 页面数据的顶级属性，可以在模块中使用usePageData获得并进行修改，因为包含了vuepress渲染的一些内部数据，个人建议还是用$frontmatter好点。

情况2：控制只有登录后才能查看页面

那为什么对vuepress页面内容做登录控制比较困难呢，因为最开始我们说了，vuepress其实是个静态页面生成器，通过调用vuepress build生成的内容其实就是dist里的一大堆htlm和js。

那如果要做到登录保护，确保未登录用户完全不能接触到页面内容的话，

在页面中加入js控制，将未登录用户跳转到登录页面并不能达到控制要求。

因为页面html会暴露页面内容，通过一定的抓取手段，就可以获得文章全文

比如我特定搜索了一下我md文件中的某些内容，实际可以发现，在生成的对应htlm文件中会静态的存在对应的内容。

那如果你并不担心这个问题，那就参考情况1使用js来做登录控制。

如果是这种情况，那我们就必须配合HTTP服务器来实现对应功能，这时，用常见静态部署容器可能无法解决问题（请查询具体容易服务商的功能服务确认），需要搭配nginx或者nodejs、java、golang等开发的web服务器，使其达到如下的流程：

1. 实现一个登录接口，该接口成功后，会配置一个客户端session
2. 在返回具体静态页面内容之前，通过配置http路由的方式让访问先通过对应的登录控制器或者登录interceptor，检查是否有session存在，如果没有，通过301重定向或者其他方式将页面访问重定向到登陆页面或者错误页面
3. 如果session存在，再读取静态页面内容，返回给用户。

因为涉及到后台的一些知识，可能专注前端的同学会比较难以理解，其实都是独立的后端功能了。我搜索了一下，也并没有开源的软件在配合vuepress提供对应的登录控制功能，如果真要做一个的话，我觉得最好有这么一些功能：

1. 可以在md文件中通过meta的形式配置是否需要登陆验证
2. 可以在md文件中配置限定用户、限定用户组等功能

感兴趣的同学可以开发一个，需要的同学也可以留言，如果需要的同学多的话，考虑有空来搞一个。