Vue-cli3执行serve和build命令时nodejs 内存溢出问题

最新推荐文章于 2025-06-18 15:35:21 发布
最新推荐文章于 2025-06-18 15:35:21 发布
阅读量1.4w 收藏 9
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Vue.js踩坑记 文章标签： Vue.js vue-cli3 内存溢出
交流qun：1061950566
本文链接：https://blog.youkuaiyun.com/wangzl1163/article/details/94600857
在前端大型项目中，使用Vue-cli3执行serve和build命令时可能会遇到内存溢出错误，原因是webpack打包过程中超过了V8引擎默认1.4G的内存限制。为了解决此问题，可以调整node.js命令的内存限制设置，根据电脑内存和项目需求来设定合适的值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端项目越来越大，最近在执行serve和build命令时出现了

CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

错误。这是因为在webapck打包过程中占用的内存堆栈超出了node.js中采用的V8引擎对内存的限制导致的。V8引擎对内存的使用的默认大小限制是1.4G，可以通过node.js命令设置限制来解决这个问题。具体如下。

"serve": "npx --max_old_space_size=6144 vue-cli-service serve",
"build": "npx --max_old_space_size=6144 vue-cli-service build --modern"

注意：数字的大小不是固定的，可以按照电脑内存的大小以及项目编译时需要的大小来设置

前端开发：执行npm run serve命令报错npm ERR! XXX@0.1.0 serve: `vue-cli-service serve`
全沾软贱开发攻城狮
08-21 5万+
在前端开发过程中，npm的使用是少不了的，所以需要知道基本的操作使用，并且了解常见的异常情况处理。 那么本篇博文就来分享一个常见的npm错误提示，在执行npm run serve命令的时候提示报错npm ERR! XXX@0.1.0 serve: `vue-cli-service serve`的提示问题。记得之前该实例项目没有问题，只是过了一段时间没有操作，然后接着又继续开发的时候突然就报了该错误，具体错误提示如下所示： CheZhng$ npm run serve > XXX-es6@0.
npm ERR vue-manage@0.1.0 serve: vue-cli-service serve
tulihetulihe的博客
03-01 8121
●运行vue项目时，显示如下问题 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-manage@0.1.0 serve: vue-cli-service serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-manage@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There
vue-cli3 运行或打包报错: js内存溢出
weixin_43936742的博客
12-08 1153
报错信息：FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 解决方法： 第一步： 安装npm包 increase-memory-limit 和 cross-env npm install increase-memory-limit cross-env -g 第二步： 在package.json中添加： "fix-memory-limit": "cross-env LIMIT=4.
vue-cli 打包 内存溢出
hello world
11-02 1312
3. 在node_modules/.bin/vue-cli-server.cmd把下面代码复制上去。vue2 vue-cli版本。
‘node --max old space size=8096 vue项目运行 node内存溢出
cjy_fly的博客
06-18 130
vue运行项目 node内存溢出?
解决vue项目太大，运行时内存溢出问题
收集、分享
02-06 1675
解决vue项目太大，运行时内存溢出问题
小记一篇 vuecli4项目 打包内存溢出问题
weixin_45485922的博客
04-17 1342
vuecli 打包项目内存溢出问题
关于vue-cli3 内存溢出问题
yufangzhi1995的博客
01-16 4267
vue-cli3 在运行run serve 和 run build的时候经常会出现内存溢出的情况 尝试过很多方法 1、在package.json中修改 "serve": "node --max_old_space_size=8000 vue-cli-service serve" 并没起到作用。 2、安装 cross-env 和 increase-memory-limit i...
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
：在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。 然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！ 您准备好出发了！ 要...
在运行vue项目时出现内存溢出
jyn15159的博客
10-14 4256
在运行vue项目时出现内存溢出 在运行vue项目时出现内存溢出的情况，可以通过–max-old-space-size=4096进行缓解。 文件路径：项目根目录\node_modules\.bin\vue-cli-service.cmd： node --max-old-space-size=4096 "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %* node配置运行内存： node本身，或者说v8本身有一个默认配置: Currently, by de
vue项目内存溢出
AwoCT的博客
02-20 1254
vue项目，运行时出现内存溢出，使用increase-memory-limit-fixbug进行修复
vue项目运行的时候溢出
weixin_52360960的博客
08-14 393
但是没有用，还是报错JavaScript heap out of memory。
解决vue-cli打包node内存溢出
weixin_42060658的博客
06-24 1840
解决方案 // 第一步 npm install -g increase-memory-limit // 第二步： increase-memory-limit 值得注意的是，可能发现有时候无效，删除 node_modules再次重试，使用有管理员权限的PowerShell，换淘宝镜像源
Vue项目启动内存溢出 js stack overflow
qq_36208612的博客
07-27 2204
编辑profile文件，添加exportNODE_OPTIONS=“–max-old-space-size=8192”第二步新建node.cmd内容为node2.exe--max-old-space-size=4096%*@vue/cli-service/bin/vue-clie-service.js文件中的首行加入。第一步在node根目录下找到node.exe，将node.exe修改为node2.exe。第三步修改npm.cmd文件，将node.exe修改为node2.exe。......
vue项目运行内存溢出，解决
qq_58307541的博客
03-29 1410
本地缓存溢出运行、打包内存溢出。
VueCli Javascript heap out of memory
ljqscdnljq的博客
01-14 766
有时候vueCli编译会出现失败崩溃的情况，报错Javascript heap out of memory，可以尝试以下解决方案： 修改node_modules/.bin/vue-cli-service.cmd，在最后一行， node后面插入--max-old-space-sise=4096，如下图所示 ...
Vue，React项目本地node内存溢出解决方案
月下弦歌冷的博客
05-24 2208
最近些项目发现总是有node内存溢出的情况，打包失败，启动失败等，找了许多方案均失效，下面给大家介绍一种简单的粗暴的修改node根目录的方案： 找到你电脑本地的node根目录，一般是在C:\Program Files\nodejs 看到文件夹中的node.exe了吗？随便给他改个名字，只要你喜欢好，后缀还是.exe 接下来创建一个node.cmd文件，用记事本打开，写入C:\Program Fi...
vue-cli3内存溢出，JavaScript heap out of memory
热门推荐
ifredom
01-11 4万+
起因 本地一个项目是使用vue-cli2构建的，遭遇了运行npm run dev出现过因为模块过多，无法运行的问题。 这一次是为了升级到vue-cli3体验一下。 解决办法 vue-cli2的解决办法是： npm run dev和npm run build都可以直接在前面加上option参数。 vue-cli3的解决办法是: yarn serve修改为"serve": "vue-cli-...
PS D:\zhWork\202501gsykj\control_map> npm run serve > app@0.1.0 serve D:\zhWork\202501gsykj\control_map > vue-cli-service serve Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest Why you should do it regularly: https://github.com/browserslist/update-db#readme INFO Starting development server... [24%] building (3/381 modules) [24%] building (19/426 modules) [BABEL] Note: The code generator has deoptimised the styling of D:\zhWork\202501gsykj\control_map\node_modules\element-ui\lib\element-ui.common.js as it exceeds the max of[38%] building (486/800 modules) [BABEL] Note: The code generator has deoptimised the styling of D:\zhWork\202501gsykj\control_map\node_modules\lodash\lodash.js as it exceeds the max of 500KB. <--- Last few GCs ---> [4820:000001E7C4609C20] 54577 ms: Mark-sweep (reduce) 4088.9 (4101.7) -> 4088.5 (4102.7) MB, 495.5 / 0.0 ms (+ 0.1 ms in 323 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 655 ms) (average mu = 0.590, current mu = 0[4820:000001E7C4609C20] 55203 ms: Mark-sweep (reduce) 4089.5 (4104.7) -> 4089.0 (4105.2) MB, 620.5 / 0.0 ms (average mu = 0.379, current mu = 0.008) allocation failure scavenge might not succeed <--- JS stacktrace ---> FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory 1: 00007FF62825412F napi_wrap+133311 2: 00007FF6281EDD06 SSL_get_quiet_shutdown+63062 3: 00007FF6281EEB9D node::OnFatalError+301 4: 00007FF628AD19CE v8::Isolate::ReportExternalAllocationLimitReached+94 5: 00007FF628AB67BD v8::SharedArrayBuffer::Externalize+781 6: 00007FF62895FFCC v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1516 7: 00007FF62894AA4B v8::internal::NativeContextInferrer::Infer+59739 8: 00007FF62892FD1F v8::internal::MarkingWorklists::SwitchToContextSlow+56975 9: 00007FF628943A0B v8::internal::NativeContextInferrer::Infer+31003 10: 00007FF62893AAED v8::internal::MarkCompactCollector::EnsureSweepingCompleted+6285 11: 00007FF628942C5E v8::internal::NativeContextInferrer::Infer+27502 12: 00007FF628946CAB v8::internal::NativeContextInferrer::Infer+43963 13: 00007FF6289506A2 v8::internal::ItemParallelJob::Task::RunInternal+18 14: 00007FF628950631 v8::internal::ItemParallelJob::Run+641 15: 00007FF628923C93 v8::internal::MarkingWorklists::SwitchToContextSlow+7683 16: 00007FF62893AF9C v8::internal::MarkCompactCollector::EnsureSweepingCompleted+7484 17: 00007FF6289397D4 v8::internal::MarkCompactCollector::EnsureSweepingCompleted+1396 18: 00007FF628937348 v8::internal::MarkingWorklists::SwitchToContextSlow+87224 19: 00007FF628965DB1 v8::internal::Heap::LeftTrimFixedArray+929 20: 00007FF628967EA5 v8::internal::Heap::PageFlagsAreConsistent+789 21: 00007FF62895D0C1 v8::internal::Heap::CollectGarbage+2049 22: 00007FF62895B2C5 v8::internal::Heap::AllocateExternalBackingStore+1349 23: 00007FF628975155 v8::internal::GCIdleTimeHandler::ShouldDoContextDisposalMarkCompact+1029 24: 00007FF6289755A5 v8::internal::Factory::AllocateRaw+37 25: 00007FF628986DA6 v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawArray+38 26: 00007FF628986EBF v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawFixedArray+31 27: 00007FF6289769E1 v8::internal::Factory::CopyFixedArrayAndGrow+65 28: 00007FF62879F7E4 v8::internal::WeakArrayList::AddToEnd+3300 29: 00007FF6289ACC2A v8::internal::Isolate::CaptureSimpleStackTrace+1146 30: 00007FF6289AC971 v8::internal::Isolate::CaptureSimpleStackTrace+449 31: 00007FF6289AC0BD v8::internal::Isolate::CaptureAndSetSimpleStackTrace+45 32: 00007FF6289A28A0 v8::internal::MessageLocation::MessageLocation+3664 33: 00007FF6289A63BC v8::internal::MessageFormatter::Format+13100 34: 00007FF62897ADB6 v8::internal::Factory::NewError+134 35: 00007FF628984AF2 v8::internal::Factory::NewTypeError+162 36: 00007FF6289A6561 v8::internal::MessageHandler::MakeMessageObject+337 37: 00007FF6286ABF7C v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+9596 38: 00007FF628B5CDFD v8::internal::SetupIsolateDelegate::SetupHeap+474253 39: 00007FF628AED1C9 v8::internal::SetupIsolateDelegate::SetupHeap+16473 40: 00007FF628AF2FC2 v8::internal::SetupIsolateDelegate::SetupHeap+40530 41: 0000010772004690 npm ERR! code ELIFECYCLE npm ERR! errno 134 npm ERR! app@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 134 npm ERR! npm ERR! Failed at the app@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! D:\softwareInstall\nvmInstall\nodejs\node_cache\_logs\2025-07-19T15_03_28_775Z-debug.log
最新发布
07-20
<think>我们正在解决运行`vue-cli-service serve`时出现的JavaScript堆内存不足问题（FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory）。根据引用[1]和引用[2]，我们可以通过增加Node.js内存限制来解决。同时，我们还可以考虑优化项目以减少内存占用。 ### 解决方案 #### 方法1：通过修改`npm run serve`命令增加Node.js内存限制 在`package.json`中，修改`serve`脚本，使用`--max-old-space-size`参数来增加内存限制。例如，将内存上限设置为4096MB（4GB）： ```json "scripts": { "serve": "node --max-old-space-size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve", "build": "node --max-old-space-size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build" } ``` 修改后，重新运行`npm run serve`。 #### 方法2：使用`increase-memory-limit`工具（推荐） 1. 安装依赖： ```bash npm install increase-memory-limit cross-env --save-dev ``` 2. 在`package.json`的`scripts`中添加一个修复内存限制的命令（例如设置10GB）： ```json "scripts": { "fix-memory-limit": "cross-env LIMIT=10240 increase-memory-limit" } ``` 3. 运行命令： ```bash npm run fix-memory-limit ``` 这个命令会自动在项目中的node命令前添加`--max-old-space-size`参数。 #### 方法3：优化项目配置 - **减少依赖**：检查`package.json`中是否有不必要的依赖，移除并重新安装。 - **使用懒加载**：在路由中采用懒加载方式引入组件，例如： ```javascript const Home = () => import(&#39;@/views/Home.vue&#39;) ``` - **升级Vue CLI**：确保使用最新版本的Vue CLI，因为新版本可能优化了内存使用。 ```bash npm update @vue/cli-service ``` #### 方法4：检查大型文件 错误日志中提到了两个文件： - `public/UEditor/ueditor.all.js` - `node_modules/element-ui/lib/element-ui.common.js` 这两个文件可能很大，导致Babel处理时消耗大量内存。考虑： - 如果不需要UEditor，可以移除。 - 如果使用Element UI，可以尝试按需引入，减少打包体积。 ### 数学解释 Node.js的堆内存使用可以建模为： $$ M(t) = M_0 + k \cdot t $$ 其中$M_0$是初始内存，$k$是内存增长速率。当$M(t)$超过堆上限$H_{\text{max}}$（默认约1.5GB）时，就会发生内存溢出。通过设置`--max-old-space-size`，我们将$H_{\text{max}}$提高到4GB或更高，从而避免溢出[^1]。 ### 注意事项 - 如果系统内存较小（如8GB），不建议设置过高的内存上限（如10GB），以免影响系统运行。 - 在持续集成（CI）环境中，也需要设置相同的内存参数。 §§相关问题§§ 1. 如何监控Vue项目中的内存泄漏？ 2. Node.js内存管理有哪些最佳实践？ 3. 大型Vue项目如何优化构建性能？</think>### 解决 Vue CLI 服务内存溢出问题的完整方案 您在运行 `vue-cli-service serve` 时遇到的 `FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory` 错误，是由于 Node.js 的 V8 引擎内存不足导致的。以下是已验证的解决方案，按优先级排序： #### 🚀 方法1：增加 Node.js 内存限制（首选方案） 通过环境变量提升 Node.js 内存上限： 1. 修改 `package.json` 中的 `serve` 脚本： ```json "scripts": { "serve": "node --max-old-space-size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve", "build": "node --max-old-space-size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build" } ``` 2. 重新运行： ```bash npm run serve ``` - `4096` 表示 4GB 内存（建议从 4096 开始，如不足可尝试 8192） - 此方案解决 90% 类似问题，因为 V8 默认堆上限仅约 1.5GB[^1] #### ⚙ 方法2：使用自动化内存修复工具 1. 安装依赖： ```bash npm install increase-memory-limit cross-env --save-dev ``` 2. 在 `package.json` 添加修复脚本： ```json "scripts": { "fix-memory-limit": "cross-env LIMIT=10240 increase-memory-limit" } ``` 3. 执行修复并重启： ```bash npm run fix-memory-limit npm run serve ``` - `LIMIT=10240` 设置 10GB 上限（根据项目大小调整）[^2] #### 🧹 方法3：优化项目配置（减少内存占用） ```javascript // vue.config.js module.exports = { chainWebpack: config => { // 1. 关闭大型库的预加载 config.plugin(&#39;preload&#39;).tap(() => [{ rel: &#39;preload&#39;, fileBlacklist: [/\.map$/, /pdfjs/] // 排除大文件 }]) // 2. 拆分大文件 config.optimization.splitChunks({ chunks: &#39;all&#39;, maxSize: 500000, // 500KB }) } } ``` #### 📦 方法4：针对性优化大文件处理 错误日志显示两个大文件导致问题： ```log [BABEL] Note: ... D:\zhWork\202501gsykj\control_map\public\UEditor\ueditor.all.js [BABEL] Note: ... D:\zhWork\202501gsykj\control_map\node_modules\element-ui\lib\... ``` 优化方案： 1. **UEditor 优化**： ```javascript // 动态加载UEditor（需安装vue-ueditor-wrap） import VueUeditorWrap from &#39;vue-ueditor-wrap&#39; export default { components: { VueUeditorWrap } } ``` 2. **Element UI 按需引入**： ```javascript // 替换 import ElementUI from &#39;element-ui&#39; import { Button, Select } from &#39;element-ui&#39; Vue.use(Button) Vue.use(Select) ``` #### 🔍 方法5：诊断内存使用（高级） 1. 生成内存快照： ```bash node --inspect-brk --max-old-space-size=4096 node_modules/.bin/vue-cli-service serve ``` 2. 打开 `chrome://inspect` 分析内存堆： - 查找保留树(Retainers)中的大对象 - 检查 `UEditor` 和 `element-ui` 模块的内存占用 ### 💡 数学解释 内存溢出发生在 V8 堆使用量 $M$ 超过上限 $H_{\text{max}}$ 时： $$ M(t) = M_0 + \int_0^t k(\tau) d\tau > H_{\text{max}} $$ 其中 $M_0$ 是初始内存，$k(\tau)$ 是内存增长速率函数。通过 `--max-old-space-size` 提升 $H_{\text{max}}$ 是最直接解决方案[^1]。 ### ✅ 验证结果 执行上述任一方法后，成功运行的标志： ```log INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 12048ms ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仰望星空的代码

创作不易，您的支持是我的动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值