起因

本地一个项目是使用vue-cli2构建的,可以正常运行。
打算升级到vue-cli@3,遭遇了运行npm run dev无法运行,爆出JavaScript heap out of memory 的问题。

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

vue-cli2遇到此问题的解决办法:

npm run devnpm run build 直接在前面加上--max_old_space_size=4096

  "scripts": {
  	"start": "npm run dev",
    "dev": "node --max_old_space_size=4096 build/dev-server.js",
    "build": "node --max_old_space_size=4096 build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "pre": "node build/pre.js",
    "dll": "rimraf dist && webpack --progress --colors --config build/webpack.dll.conf.js"
  },

vue-cli3遇到此问题的解决办法:

  1. scripts中添加一句指令
  2. 安装两个npm包 : increase-memory-limitcross-env
  3. 安装完成后,先执行一次 npm run fix-memory-limit,然后yarn serve启动即可
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit",
  },
  
# 同时安装 2 个依赖包

"devDependencies": {
   "increase-memory-limit": "^1.0.3",
   "cross-env": "^5.0.5"
}

vue-cli3 的解决办法找了半天才找到,说一下修复原理
它不能像vue-cli2直接在 npm run dev中间添加一个参数,我尝试了几种方法只有使用安装模块fix-memory-limit的方式生效,其原理是修改了node_modules中一个叫做.bin(通常就是第一个文件夹)的文件夹内所有文件权限。

  • 方法一:在package.json中scripts原基础上添加参数,以及尝试使用npx。不行。
    在这里插入图片描述
  • 方法二: 在node_modules中的vue-cli-sevie源代码中添加一句。 不行。
    在这里插入图片描述
  • 方法三: 就是上面提到的解决办法。亲测有效。

------ 如果文章对你有用,感谢右上角 >>>点赞 | 收藏 <<<

Logo

前往低代码交流专区

更多推荐