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。。。欢迎纠正