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
    
    ```
    目录结构
    

clipboard.png
.yml内容

clipboard.png

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

clipboard.png


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

clipboard.png

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

clipboard.png

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

链接描述

clipboard.png


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

clipboard.png

好了现在可以正常访问了 

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

clipboard.png

配好后打包的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。。。欢迎纠正



阅读 7.4k

推荐阅读
前端踩坑之路~
用户专栏

18届毕业萌新的前端学习,经验,整理~TBC 欢迎交流

0 人关注
5 篇文章
专栏主页