Vue.js构建完成后进程未终止，GitHub Actions超时失败求助

我的Vue.js项目执行build命令后，终端显示「DONE Build complete. The dist directory is ready to be deployed」，无任何错误，dist文件夹也正常生成，但命令会持续运行不退出。用verbose模式输出结果一致，这直接导致GitHub Actions对应步骤无法完成，工作流最终因超时失败。

解决方法 #

1. 强制进程退出（快速临时方案） #

修改package.json中的build脚本，在build命令后添加强制退出语句：

"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build && exit 0"

GitHub Actions一般使用Ubuntu镜像，上述命令适用；如果是Windows环境，替换为&& exit /b 0。

2. 升级Vue CLI服务版本 #

你当前使用的@vue/cli-service是3.12.1版本，该旧版本存在build后资源清理不彻底的偶发问题：

• 升级到3.x系列的最新小版本，或直接升级到4.x版本（注意需兼容Vue 2.5.17）
• 执行命令更新依赖：

  npm update @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint
  

3. 排查可疑依赖 #

部分涉及文件生成或后台进程的依赖可能导致进程无法终止，比如vue-html2pdf：

• 临时移除可疑依赖，重新执行build命令，验证是否能正常退出
• 逐步排查后，替换问题依赖或升级其版本

4. 添加Webpack钩子强制退出 #

在vue.config.js中添加Webpack的done钩子，确保build完成后退出进程：

module.exports = {
    configureWebpack:{
        performance: {
            hints: false
        },
        optimization: {
            splitChunks: {
                minSize: 10000,
                maxSize: 250000,
            }
        },
        plugins: [
            {
                apply: (compiler) => {
                    compiler.hooks.done.tap('DonePlugin', () => {
                        // 延迟1秒退出，确保Webpack完成资源清理
                        setTimeout(() => {
                            process.exit(0);
                        }, 1000);
                    });
                }
            }
        ]
    },
    devServer: {
        disableHostCheck: true,
        port: 4000,
        public: '0.0.0.0:4000'
    },
    pluginOptions: {
        webpackBundleAnalyzer: {
            analyzerMode: "disabled"
        }
    },
}

项目配置文件 #

package.json #

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "build-dev": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@duoa/vue-color-picker": "^1.0.6",
    "apexcharts": "^3.45.1",
    "axios": "0.18.0",
    "bootstrap-vue": "2.0.0-rc.11",
    "jquery": "^3.7.1",
    "lodash": "^4.17.21",
    "sass": "^1.69.5",
    "sass-loader": "10",
    "v-mask": "^2.3.0",
    "v-money": "^0.8.1",
    "vue": "2.5.17",
    "vue-apexcharts": "^1.6.2",
    "vue-colour-picker": "^0.0.5",
    "vue-gravatar": "1.2.1",
    "vue-html2pdf": "^1.8.0",
    "vue-js-toggle-button": "^1.3.3",
    "vue-mq": "0.2.1",
    "vue-multiselect": "^2.0.8",
    "vue-router": "3.0.1",
    "vue-the-mask": "^0.11.1",
    "vue-toasted": "1.1.24",
    "vuelidate": "^0.7.7",
    "vuex": "3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.12.1",
    "@vue/cli-plugin-eslint": "3.12.1",
    "@vue/cli-service": "3.12.1",
    "vue-template-compiler": "2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

vue.config.js #

module.exports = {
    configureWebpack:{
        performance: {
            hints: false
        },
        optimization: {
            splitChunks: {
                minSize: 10000,
                maxSize: 250000,
            }
        }
    },
    devServer: {
        disableHostCheck: true,
        port: 4000,
        public: '0.0.0.0:4000'
    },
    pluginOptions: {
        webpackBundleAnalyzer: {
            analyzerMode: "disabled"
        }
    },
}

内容的提问来源于stack exchange，提问作者Matheus Celini