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

当使用Vue-cli3执行serve和build命令时，可能会遇到nodejs内存溢出问题，此时需要进行相应的解决。

问题原因分析

执行serve和build命令时，vue-cli会在内存中对项目进行打包和编译，当项目较大时，内存使用过于频繁，会导致nodejs内存溢出。这时候我们需要修改nodejs默认的最大内存限制，以解决此问题。

解决方案

修改package.json文件

在package.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"
}

其中，--max_old_space_size=4096表示将nodejs默认最大内存限制修改为4GB。

使用cross-env设置环境变量

在安装cross-env之前，需要安装其依赖的包envinfo，使用如下命令进行安装：

yarn global add envinfo

安装完成后，使用以下命令安装cross-env：

yarn add cross-env --dev

然后在package.json中修改serve和build命令：

"scripts": {
    "serve": "cross-env NODE_OPTIONS='--max_old_space_size=4096' vue-cli-service serve",
    "build": "cross-env NODE_OPTIONS='--max_old_space_size=4096' vue-cli-service build"
}

其中，NODE_OPTIONS='--max_old_space_size=4096'表示将nodejs默认最大内存限制修改为4GB。

示例说明

修改package.json文件示例

假设我们已经在Vue-cli3创建了一个项目，并且在根目录下有package.json文件。此时我们通过以下命令安装cross-env：

npm install cross-env --save-dev

然后在package.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

使用cross-env设置环境变量示例

假设我们已经在Vue-cli3创建了一个项目，并且在根目录下有package.json文件。此时我们通过以下命令安装cross-env：

npm install cross-env --save-dev

然后在package.json中修改命令：

"scripts": {
    "serve": "cross-env NODE_OPTIONS='--max_old_space_size=4096' vue-cli-service serve",
    "build": "cross-env NODE_OPTIONS='--max_old_space_size=4096' vue-cli-service build"
}

保存后，我们可以通过以下命令启动服务：