vuepress部署静态网站踩坑指南

1. 背景

Q1做了个小项目，自动化输出一份文档，把我司某个用户社区的功能点标记出来，并标上图中哪块数据用到哪个接口。
完成后输出的方案是做成静态网站 部署到线上。
因为我这边是前端，只能拿到后端接口，可能还需要后端或者c端或者其他端补充文档，
因此想实现一个，各端同学都方便修改的方案，
最后敲定，使用markdown编辑，只需push到gitlab，ci就会自动构建，跑vuepress build，生成静态网站，部署到服务器。

2. 实现方式
初始化项目-》写好yml->在gitlab配置好ci-》完成我的docker（我的docker其实只是初始化了node的环境）（docker的实现在另一个文章补充）-》push代码到gitlab->gitlab ci自动构建 项目 发布dist下面的文件到服务器-》访问 www.xxx.com/xxx/xx/xx/index.html -》done

    init
    
    ```
    npm init
    npm install vuepress -s-d
    
    ```
    目录结构
    

.yml内容

3. 踩到的坑

A 本地调试 vuepress dev docs 报错 getReshandler。。。(忘记具体说啥了)
    解决过程：statckoverflow搜索
    解决方案：
    安装 

     "webpack-dev-middleware": "3.6.0"

B
本地localhost:8080 调试的时候没毛病
部署到测试服务器 通过 www.xxx.com/xxx/xx/xx/index.html
访问的时候 先跳正常页面 然后出现404

一脸懵逼找了半天解决方案。把stackoverflow,sf，google翻了一遍发现没找到解决方案
心态很崩，甚至想换个工具。
然后抱着试一试的心态自己思考了下原因。
打印了router 
发现是path对应的component是没有的

本地不会有这个情况
于是乎，想了个骚操作，

把to.path对应的跳转全都redirect到/下
这下会出现一个问题 www.xxx.com/xxx/xx/xx/index.html刷新会跳到 www.xxx.com
这不是我想哟的结果 我肯定是想要正常的访问我的页面
突然灵光一现
官网的配置有个base选项

链接描述

天哪因为我一开始不是挂在git上所以一直没注意...现在我修改了下

好了现在可以正常访问了 

C 因为静态资源上了cdn  所以 html的访问域名是  www.aa.com ，静态资源的路径是 www.bb.com，因此不能用相对路径，否则根本访问不到静态资源
   解决方案：
vuepress支扩展webpack配置

配好后打包的dist对应的引用资源的前缀就会变成publicpath对应的啦~
D
如果实现 www.xxx.com/xxx/xx/xx/index.html 然后直接通过charles代理 在本地调试
而不是loaclhost：8080的方式 好像不行
因dev 命令没生成 dist文件夹，npm run dev docs之后 引用了 app.js等文件 而不是build 之后那些形式。。不知道怎么写
charles规则。（如果有人懂得话欢迎指导一下~~~）
TBC。。。欢迎纠正