Vuepress Build Error

Vuepress2版本打包报错:TypeError: Invalid value used as weak map key

出现原因:

在项目中添加SpringBoot相关md文件,准备 build部署一下,不料,没有打包成功通过,出现了下面的错误:

image-20221107115818724

百度之后才知道,md 文件里面使用<font size="25">一段描述</font>这样类似的 font标签导致编译不通过。

解决办法:

可以将 font 标签修改为 <div> 或者<p>标签就可以了,例如

一段描述

效果和 font 标签一样。

**注意⚠️:**还有可能是其他html语法,也会导致这个错误。

排查方法,找到对应文件,挨个排查

URL转码地址open in new window

本地build无法访问外部链接图片

出现原因:

经过查阅相关内容了解到,这是服务器防止盗链的策略引起的。一般来说,从服务器站点下载图片资源,会产生相关的流量费用(比如阿里云的ossopen in new window服务器),所以需要一些方法来防止类似的盗链情况的发生,背后的原理就是利用 http 请求的 referrer 头信息,headers 中的 referer 表示你是从哪个站点(域名)来到图片资源所在的服务器的,我们请求页面的时候,也通过抓包包软件可以看到这个 referrer 头信息的具体内容,一般来说就是你自己站点的域名。

解决办法:

在服务器端可以获取的 referrer 的内容,并根据需要对其进行处理,比如 referrer 内容为空或者在白名单列表里就不执行防盗链的相关处理,反之则提示403 Forbidden,目前有一个简单的解决这个问题的方法:在我们的HTML页面添加meta属性:

<meta name="referrer" content="no-referrer" />

对于vuepress,只需要在config.ts,添加如下代码

//解决请求第三方图片403问题,图片防盗链
['meta', { name: 'referrer', content: 'no-referrer' }],

这样处理后,我们的页面在请求第三方服务器的图片资源时,header 的 referrer 头信息就为空了。如果第三方站点允许 referrer 为空的资源请求,那我们就能够正常请求到图片资源了。

参考:referrer策略和meta标签的问题open in new window

以后出现此错误,记得查阅笔记,关键是它的报错定位不准确。

Node内存不足,解决方案

运行yarn build 运行报错

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0x56264ca40dd4 node::Abort() [/usr/bin/node]

这个错误是由于 Node.js 的内存限制导致的。在执行 yarn build 时,如果你的项目非常大或者有复杂的构建过程,可能会消耗大量内存,超出 Node.js 默认的内存限制。

解决方案

要解决这个问题,你可以尝试增加 Node.js 的内存限制。这可以通过设置环境变量 NODE_OPTIONS 来实现,如下所示:

  1. 打开终端或命令提示符。

  2. 执行以下命令来设置 NODE_OPTIONS 环境变量,并增加内存限制:

    export NODE_OPTIONS=--max-old-space-size=4096
    

    这里,4096 表示分配给 Node.js 的内存上限,单位是 MB。你可以根据需要调整这个值。

  3. 再次运行 yarn build 命令。

如果你使用的是 Windows 系统,设置环境变量的命令可能会有所不同:

set NODE_OPTIONS=--max-old-space-size=4096

另外,确保你的系统有足够的空闲内存来支持增加的内存限制。如果问题仍然存在,可能需要进一步优化你的项目构建过程或考虑使用更强大的硬件。

Loading...