一、简介

20240116 更新

今天更新简单的说一下快速的构建出来 vuepress 的项目。我们在浏览器里面搜索 vuepress 进入到官网，里面是默认 vuepress1.x 的版本，我们要在右上角切换到 2.x 的版本文档。 我们按照官网来就能够很快速的构建出来， 快速上手

这里提几个思考：

• 对于新手来说，官网里面很多的目录，想要找到自己需要的资料是比较困难的，如果进一步学习的话，建议找一个 b 站的快速入门的视频来看，因为我主要是后端开发，前端知识懂一些，但是不多，从视频里面我们能够大致有一个整体架构。
• 初学者我还是建议从构建项目开始，一步一步的尝试，这样你会发现掌握的很牢固，这个和开箱即用有很大区别， 因为你是在别人的基础上，对于使用的代码是很陌生的，自己走过来的代码就不会那样，这也能促使自己有写作的东西
• 学习和写博客都是一个长期的事情，不在一朝一夕。（重要）

20240117 更新

使用过了许多的静态网站来写博客，像是hexo、docusaurus， 但总是感觉要么很复杂，自己没办法改；要么就是样式问题，自己看不习惯，不想自己去修改。

为什么我会选择 vuepress2， vuepress 是基于 vue 开发的，加上公司里面是用的 vue，自己会的话，工作方面也好办一些,docusaurus 是基于 react 来写的，就感觉不是很方便。

二、学习中使用的部分插件

使用了一个新的主题，主题项目里面集成了一些插件。

三、过程问题

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

四、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、vuepress部署上去之后访问app-D2SzGsD9.js:13 TypeError: Cannot read properties of undefined (reading 'path')

感觉上像是那个文件配置的不对，但是又没有提示那个文件出现错误了。