迁移vuepress博客的踩坑经历！ 作者：小傅哥
博客： https://bugstack.cn (opens new window) 原文： https://mp.weixin.qq.com/s/B4kDL_ft5Ril2wvjg1odMA (opens new window) 沉淀、分享、成长，让自己和他人都能有所收获！😄 # 一、我，多能折腾！ 🚌 我跟你说，折腾蓄蓝，还能赚钱！ 2013年，毕业以学Java的身份进入传统企业写C#和PLC，每天5:30下班，总有伙伴找到我帮忙做个网站。 PS：要用PHP写，省服务器费用！ 2014年，租住门脸，下班回来顺便，卖电话、内存卡、充电线、手机壳、充话费 2015年，搭建 itstack.org 域名博客，编写 Netty 5.0 案例，后因 org 域名不能备案，博客也挂了 2016年，从传统行业进入互联网已经半年，开始疯狂折腾 Java 以前不熟悉的技术 2017年，好奇所接触的一切新鲜框架技术，羡慕技术大佬的能力，书童一样学习高并发场景实现，这么大的调用体量怎么没有挂 2018年，不只是看了，开始对源码动手，把 RPC 实现了一遍，做了一套监控系统，写了一堆的中间件，申请了好几个专利，差点被淘宝中间件团队挖去。 2019年，从《用Java实现一个JVM》开始，捡回我的热情，申请并备案域名、搭建 jekyll 博客、开通公众号，年底成为 CSDN 博客专家并已积累公众号粉丝1k 2020年，2月编写第一个基于 Netty 实现的仿微信 IM，放到腾讯技术社区参赛，获得第一名 (运营小姐姐告诉我，她把仿微信IM推给了小马哥，哈哈哈) 。同年 字节码编程 、 设计模式 、 面经手册 等PDF相继出炉，火了 他们都问我是不是字节的 ！ 2021年，赶在图书节，我的第一本技术书籍《重学Java设计模式》出版了，出书并不是终点，只是想走走没走过的路、爬爬没爬过的山，看看风雨过后的彩虹是否那么绚烂。 结束了吗？ 不，折腾依旧在！ 2021年的1024，小傅哥一路趟坑，把300篇文章的bugstack虫洞栈博客从 jekyll 升级到 vuepress！ 这些年的折腾在 域名申请到备案 、 服务器选择到上线 、 PHP开发扩展功能 ， 迁移兼容博客 等，经验和技能储备都没问题，也会点 html、css、js、jquery 做自定义的开发处理。但在面对没接触过的 vue 时，依旧有点不知道从哪下手，而为了vuepress博客从能用到好用， 一顿操作差点干拉胯 ！ 技术拓宽 、 实力增强 、 薪资拉升 ，来吧， 一起折腾 ！ # 二、坑，差点肝拉？ 可能你没自己搞过 vuepress 的博客，你不知道。它这个 官网 (opens new window) 说啥？说： 像数 1, 2, 3 一样容 tui！糟老头子坏的很，没有一点前端知识根本跑不起来，更别说是生产使用，只能算是玩具级别。 当然，不要误会，人家这个也是想着你有vue的知识背景的，不过我不是没有吗！ 为此在我折腾完把坑趟平以后，知道怎么正确操作后，还专门录了个搭建 vuepress 博客教程的视频，如下： 嘿，好嘛！有了这个案例后，我就一直在琢嘛，怎么把我的博客迁移过来呢，毕竟这套架构可以更好的承载我的文章，也能很大程度的提升阅读体验和对博客的操作空间。 日日思念惦记呀，就跟你处对象一样，朝为日，暮为月，卿为朝朝暮暮啊！咋整，办它吧，想过会遇到坑，也提前铺平垫稳了，但无奈还是会有很多因为没折腾过，vue 知识储备不足而遇到的问题。 # 1. 300篇文章迁移，链接问题
背景 ：旧版博客到新版博客的迁移，不只是想把界面结构更换了，还希望解决文章分类的问题，所以在有些文章会重新摆放它所属的文件夹。 问题 ：那么就会出现文章路径与原来文章路径不一致的问题。这其中还包括原有文章中用到的图片路径问题。 方案 ：分两阶段解决，如果目前把旧版文章全部下线会导致很大一部分老用户，尤其是保留了旧版链接的用户，在访问文章时就会出现 404 找不到了文章了，体验非常不好。所以这里上新版博客的同时也保留旧版博客在同一个服务器中，另外把服务器的 404 配置页面配置到 https://bugstack.cn (opens new window) 以免将来旧版链接几乎已经没有什么流量删除时，再次出现 404 所以为了安全起见先把 404 页面配置成首页，这样也能满足用户找到现有的文章路径。 # 2. 浏览器限制cookie，解锁问题
背景 ：小傅哥的博客有一个 阅读解锁 功能，这个解锁是基于公众号做的开发，浏览器生成通过友盟cookie获取6位的唯一码，当做用户的个人ID，再通过这个ID到公众号输入后绑定到公众号个人身份ID上，就解锁了。 问题 ：但有些用户限制了浏览器cookie，或者安装了一些拦截广告的插件，那么 cookie 就不能正确拿到了，一点阅读全文这个解锁码就不唯一了，卡卡的闪。我头都大了！ 方案 ：咋办，总不能告诉每个用户，你把插件给我删了 cookie 给我打开吧，那他们肯定觉得傅哥技术拉胯呀！后来我就想肯定会有一个技术手段能在浏览器计算出唯一ID，否则我不登录时候浏览器xxxx，怎么就给我推荐了呢。经过搜索还真有对应的东西，就是浏览器指纹，fingerprintjs 浏览器指纹库，这个库用于查询浏览器属性并从中计算散列的访问者标识符。与 cookie 和本地存储不同，指纹在匿名/私有模式下保持不变，甚至在清除浏览器数据时也保持不变。妥，有了这个技术就妥嘞，在 cookie 限制的情况下，通过浏览器指纹获取唯一ID截取成文章解锁码。 # 3. 构建文件哈希命名，版本问题
背景 ：看到这的时候我人都傻了，vue 变异出来的文件竟然 数字+哈希值.js 想想也对，人家这样可以更好的保证版本升级，不至于出现缓存问题。 问题 ：有啥问题呢，你看左侧本地和右侧服务器，发现没。只要每次部署一个版本，服务器端就多出一个新的js文件，好家伙这用不了多久，不把我这小服务器干满了吗！！！删除？删错了呢，那多吓人！ 方案 ：其实有时候遇到这样问题不知道咋查你懂吧，搜了半天不如问前端一下，原来这个是可以通过webpack把打包文件名称处理的，也就是你可以让每次的构建出来的 js、css、img 文件名，都是一个固定的名字。但还有点小问题，vue 里是这么搞，vuepress 怎么搞呢，找了不少资料终于找到 chainWebpack 可以配置文件名 config.output.filename('assets/js/cg-[name].js?v=' + dateTime).end(); 模块打包配置：
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
const dateTime = new Date().getTime();
// 清除js版本号
config.output.filename('assets/js/cg-[name].js?v=' + dateTime).end();
config.output.chunkFilename('assets/js/cg-[name].js?v=' + dateTime).end();
// 清除css版本号
config.plugin('mini-css-extract-plugin').use(require('mini-css-extract-plugin'), [{
filename: 'assets/css/[name].css?v=' + dateTime,
chunkFilename: 'assets/css/[name].css?v=' + dateTime
}]).end();
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15