GitHub Pages部署Vuepress一直都没有什么问题,具体部署方案参看: 基于VuePress搭建博客系统及优化过程(持续更新…)

但是突然有一次部署就出现了如下的报错情况:

经过百度,发现原因是node使用的堆内存超出了V8引擎允许的最大值。

分析和解决过程

经过搜索常常得出了两种解决方案。

1、使用 increase-memory-limit 插件

TypeScript 和 webpack 时的常见问题,项目过大时,使用 increase-memory-limit,增加node服务器内存限制。

npm install -g increase-memory-limit

进入工程目录执行:

increase-memory-limit

在执行上述操作后,然后执行npm run build 后,会报错:

'"node --max-old-space-size=4096"' 不是内部或外部命令,也不是可运行的程序

在高版本中移除了node命令,所以也不能解决。

2、修改cmd文件

在目录node_modules/.bin下打开ng.cmdngc.cmd文件,添加 --max_old_space_size=4096

但是因为最终部署在GitHub Pages,没有办法直接修改 node_modules 的文件,所以这种方法不行。

Node.js v8.0 开始,可以使用NODE_OPTIONS 环境变量来全局设置 max_old_space_size 来增加内存限制

export NODE_OPTIONS=--max_old_space_size=4096

increase-memory-limit 将附加 --max-old-space-size=4096 到文件中的所有 node 调用中node_modules/.bin/*

注意:如果在windows系统,可以使用命令:

set NODE_OPTIONS=--max_old_space_size=4096

因为export是linux命令。

修改原来的github部署脚本:

name: Deploy GitHub Pages
# 触发条件:在 push 到 master 分支后
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    # 服务器环境:最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false
      # 生成静态文件
      - name: Build
        run: npm install && export NODE_OPTIONS=--max_old_space_size=4096 &&npm run build
      # 部署到 GitHub Pages
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist

                    GitHub Pages部署vuepress报错:FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
项目启动和打包方式
yarn下载相关模块, yarn dev启动项目。
有两个分支, master存放的是生成的静态文件, develop存放的是网站的原始文件,已修改替代分支为develop 。一般来说不需要去切换分支,只需要在develop上开发就好,完成之后暂存,提交和推。
生成静态文件只需要执行yarn deploy就可以打包并发布到github(无论您当前在哪个分支,它执行的是项目目录下的deploy.sh文件)。但是需要注意的是yarn deploy依赖于GitBash,也就是说要在git的命令行中运行。
添加页面方式
所有的页面都在docs / pages /下面,根据tabs区分不同的文件夹
1.首先在对应标签下创建标记文件,如blog / javascript下一个“前端实现图片压缩上传.md”
 2. docs / .vuepress是vuepr
==== JS stack trace =========================================
    0: ExitFrame [pc: 000002AACBF079E0]
Security context: 0x00b4d151e6e9 <JSObject>
    1: byteLength(aka byteLength) [00
				
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档。恰好最近需要为一些组件写文档,就动手撸了一波,毕竟刚发布,遇到不少坑,最终还是磕磕碰碰的运行起来了,为了避免大家踩同样的坑,特意将搭建的过程记录下来,分享一波。 以下是几个已知的问题 因为util.promisify是在node 8.0之后引入的,...
vue-element-ui 项目 V8引擎对内存的使用的默认大小限制是1.4G,可以通过node.js命令设置限制来解决这个问题。修改package.json文件中内容,具体如下。 "serve": "npx --max_old_space_size=4096 vue-cli-service serve", "build": "npx --max_old_space_size=4096 vue-cli-service build --modern" 一般vue项目 vue没有把package.
VUE项目首次npm run dev能正常运行,更改部分代码后保存运行抛出误。 分析原因:JavaScript heap out of memory(应该是内存溢出的原因) 解决方法: 找到node_modules/.bin/webpack-dev-server.cmd这个文件,添加一句:“–max-old-space-size=2048” 注意:–max-old-space-size=20...
如图所示:频繁出现此种情况,项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 全局安装increase-memory-limit npm install -g increase-memory-limit 进入工程目录,执行: increase-memory-limit OK,解决完毕!
vue项目内存溢出的问题(young object promotion failed Allocation failed - JavaScript heap out of memory)前言问题解决方法 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言问题解决方法 在开前端项目如果非常的庞大,webpack 编译时就会占用很多的系统资源,如果超出了V8对 Node 默认的内存限制大小就会出现内存溢出问题 提示:以下是本篇文章正文内容,下面案例可供参考
打包出现JavaScript堆内存不足 最近打包遇到这种 Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 解决方法如下: 1.从网上搜索的资料试了一下,不大好用,不过也照做了 修改 package
最近发现好多小伙伴刚用VuePress,然后一build完就直接用本地浏览器访问,结果出现黑块。仅仅出现那种问题还好,给项目安装 vuepress-plugin-serve 插件就行了, 但是如果有需求是需要离线查看 VuePress 生成后的文档呢?所以我特地研究了一下—— 打开 .vuepress/config.js 文件,把 base 的值改成 ./,为了方便调试,最好这样写: //base: "/", base: "./", 写两个,一个用于Dev,一个用于Build。 然后打开项
以下是GitHub Pages部署公网的具体操作流程: 1. 创建GitHub仓库:在GitHub上创建一个新的仓库,命名为“username.github.io”,其中“username”是你的GitHub用户名。这个仓库将成为你的个人网站的根目录。 2. 创建网站文件:在本地计算机上创建网站文件,可以使用HTML,CSS,JavaScript等技术来构建网站。 3. 将网站文件上传到GitHub仓库:将网站文件上传到之前创建的“username.github.io”仓库中。可以使用Git命令行或者GitHub Desktop等工具来上传文件。 4. 配置GitHub Pages:打开GitHub仓库的“Settings”页面,找到“GitHub Pages”选项,选择“master branch”作为源,点击“Save”按钮。 5. 等待部署完成:GitHub Pages需要一些时间来部署你的网站,一旦完成,你的网站就可以在“https://username.github.io”上访问了。 以上就是GitHub Pages部署公网的具体操作流程。需要注意的是,GitHub Pages只支持静态网站,不支持动态网站。如果你需要部署动态网站,可以考虑使用其他云服务提供商,如Amazon Web Services或Google Cloud Platform。