我的Vueress 2.0学习笔记
一、简介
思考（20240116 更新）
今天更新简单的说一下快速的构建出来 vuepress 的项目。我们在浏览器里面搜索 vuepress 进入到官网，里面是默认 vuepress1.x 的版本，我们要在右上角切换到 2.x 的版本文档。 我们按照官网来就能够很快速的构建出来， 快速上手
这里提几个思考：
- 对于新手来说，官网里面很多的目录，想要找到自己需要的资料是比较困难的，如果进一步学习的话，建议找一个 b 站的快速入门的视频来看，因为我主要是后端开发，前端知识懂一些，但是不多，从视频里面我们能够大致有一个整体架构。
- 初学者我还是建议从构建项目开始，一步一步的尝试，这样你会发现掌握的很牢固，这个和开箱即用有很大区别， 因为你是在别人的基础上，对于使用的代码是很陌生的，自己走过来的代码就不会那样，这也能促使自己有写作的东西
- 学习和写博客都是一个长期的事情，不在一朝一夕。（重要）
为什么用Vuepress（20240117 更新）
使用过了许多的静态网站来写博客，像是hexo、docusaurus， 但总是感觉要么很复杂，自己没办法改；要么就是样式问题，自己看不习惯，不想自己去修改。
为什么我会选择 vuepress2， vuepress 是基于 vue 开发的，加上公司里面是用的 vue，自己会的话，工作方面也好办一些,docusaurus 是基于 react 来写的，就感觉不是很方便。
http-server （20250310 更新）
部署前端静态文件的时候，可以在本地启动看看有没有问题。
# 全局安装http-server
npm install http-server -g
# 查看是否安装成功
http-server -v
# 切换到dist目录
cd dist
# 开启服务器
http-server
# 防止80端口被占用，可以指定端口, -p指定端口 -o打开浏览器
http-server -p 8091 -o参考：http-server使用，启动本地服务器 & 使用serve包本地启动
二、学习中使用的部分插件
使用了一个新的主题，主题项目里面集成了一些插件。
三、过程问题
1、vuepress 如何加载网路图片？（20240119 更新）
我使用的是 picgo+gitee 的方式在实现图床，就是把图片通过 picgo 的方式上传到 gitee，然后 gitee 加载出来一个图片的链接地址，今天在用的时候发现 md 文件中运行出来图片不展示了，最后发现可以用如下方式解决：
在 config.js 中添加 head 节点内容如下：
head: [ ["meta", {name:"referrer", content:"no-referrer"}], ],即可解决问题。
参考文章： vuepress 如何加载网络图片
2、如何在一个 md 文件里面展示出来当前目录导航？
3、解决侧边栏显示文件路径的问题
平常写的时候喜欢写 title 属性，但是展示出来是这样子的
/vuepress2.0/README.md // 这里vuepress2.0是我的目录，按理说是不应该有的这里需要冒号后面添加一个空格, 像这样title: page_title
4、踩坑 vuepress-theme-plume，线上 navbar 点击不跳转
上面我不是说不用主题吗，后面不是又用了嘛，但是这个里面有点点坑，作为初学者的我也是研究了需求才弄明白。 问题就是在本地运行没有问题，但是一打包都到服务器上面就有问题。
这个问题最后是把包管理工具切换到 pnpm 才解决的 最开始我用的是 yarn 1.22 版本的包管理工具，但是主题默认安装了一个 comment2 的插件，最小支持的版本是 yarn2.x, 就去升级到 yarn 4.0.2, 后面都很正常就是在打包丢到服务器上面，发现切换 navbar 点击无效，找了很久才在源码库里面看到下面这个图片，才想着换包管理工具，折腾了两天还是蛮开心的。
这个过程自己也对前端有了一个初步的了解，主要还是 yarn、npm、pnpm 这个管理工具的认识。
四、Cloudflare 部署问题
1.This project is configured to use yarn？
刚才在推送到 cloudfare 上面自动部署的时候出现了一个这个问题，这个我是很清楚的；项目是我用 yarn init 创建出来的，但是现在使用的是 pnpm 来管理，所以这里我们要切换一下。
修改 package.json 中的 packageManager 为自己使用的版本。
"packageManager": "yarn@1.22.21"---> "packageManager": "pnpm@8.14.3"
2.Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with package.json
这个问题主要就是因为 package.json 与 pnpm lock 文件里面定义的不匹配，现在的解决办法就是不上传 pnpm-lock.json 这个文件。
3.TypeError: Cannot read properties of undefined (reading 'split')
10:11:05.287 TypeError: Cannot read properties of undefined (reading 'split')
10:11:05.287 at file:///opt/buildhome/repo/docs/.vuepress/.temp/.server/app.13DZFPsY.mjs:3837:42
10:11:05.288 at Array.forEach (<anonymous>)
10:11:05.288 at file:///opt/buildhome/repo/docs/.vuepress/.temp/.server/app.13DZFPsY.mjs:3836:16
10:11:05.288 at ReactiveEffect.fn (/opt/buildhome/repo/node_modules/@vue/reactivity/dist/reactivity.cjs.js:996:13)上面就是 cloudflare 在部署的时候输出的错误信息，我们可以清楚的看到他在使用 vuepress 下面.temp 目录里面的问题，但是很疑惑这个，我们都没有操作这个目录，为什么会用到这里的文件呢？
在.vuepress 目录下面，除了 temp 目录，还有一个 cache 的目录，这两个目录是用来实现热更新的，就是我们改了一些文件，保存之后就会自动刷新上去，就是因为这两个文件。
对于解决方案来说，我们还是选择不上传到 github，让 cloudflare 自己去构建。
4、TypeError: Cannot read properties of undefined (reading 'path')
感觉上像是那个文件配置的不对，但是又没有提示那个文件出现错误了。
我现在也说不清楚这个问题到底在哪里，后面我就更新了vuepress-theme-plume的版本，但是出现了下面的问题
5、升级主题后出现：useClientData() is called without provider
在升级相应的版本之后，出现了这个问题，这个的话我再 github上面也遇到两个一样的问题。
参考 :
usePageHead() is called without provider #103
[Bug]useClientData() is called without provider
执行一下npx vp-update。对于这个npx是什么后面再补充，搞了两天终于是解决了。
6 The language 'mysql' is not loaded, falling back to 'txt' for syntax highlighting.
这是一个警告，大概的意思就是因为在插入代码的时候，将代码的类型设置成了mysql，但是mysql的话，markdown文件有识别不了导致的提示。例如下面所示：
```mysql
```7 TypeError: Cannot read properties of undefined (reading '0')
现在来看，这个问题就是因为将vuepress-theme-plume定义到了tags信息头里面， 这个为什么不能通过build， 现在还不清楚。
错误代码如下：
title: vuepress-theme-plume源码
author: 邓聪的小破站
createTime: 2024/06/28 00:36:57
permalink: /article/xfyjihyq/
tags:
- vuepress
- vurpress-theme-plume ❌ 不要这样写8 SyntaxError: The requested module 'node:events' does not provide an export named 'addAbortListener'
00:29:14.016 Executing user command: pnpm build
00:29:14.681 > vuepress-starter@1.0.0 build /opt/buildhome/repo
00:29:14.681 > vuepress build docs
file:///opt/buildhome/repo/node_modules/.pnpm/execa@9.3.1/node_modules/execa/lib/utils/max-listeners.js:1
00:29:15.786 import {addAbortListener} from 'node:events';
00:29:15.786 ^^^^^^^^^^^^^^^^
00:29:15.786 SyntaxError: The requested module 'node:events' does not provide an export named 'addAbortListener'在升级了vuepress的版本到2.0.0-rc.14的时候，使用CloudFlare build的时候提示了这个错误，在github上面看到，应该是因为node 的版本的问题，CloudFlare配置的build system 2 里面的node版本是v18.17.1的版本， 需要将版本升级，我这里升级到v20.17.0，通过在CloudFlare的Environment variabvles里面添加NODE_VERSION等于v20.17.0，如下图：
后面就是把生产用的运行环境也调一下。
9、启动vuepress2的项目，上方导航栏消失了
现在就只有Home、Blog、Tags、Archives这些导航栏。