vuepress部署静态网站踩坑指南

66次阅读

共计 1264 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0