排查Laravel+Vue项目npm依赖安装时的npm ERR! code 1错误

问题描述 #

项目基于Laravel和Vue.js构建，执行npm install时触发npm ERR! code 1错误。已尝试以下方案但未解决：

• 删除node_modules和package-lock.json后重新执行npm install
• 执行npm remove node-sass移除node-sass
• 执行npm cache clean --force清理npm缓存
• 安装Python并配置环境变量

项目的package.json配置如下：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "@johmun/vue-tags-input": "^2.1.0",
        "@pencilpix/vue2-clock-picker": "^0.1.6",
        "@stripe/stripe-js": "^1.20.3",
        "@trevoreyre/autocomplete-vue": "^2.2.0",
        "@vee-validate/i18n": "^4.5.3",
        "axios": "^0.19.2",
        "babel-polyfill": "^6.26.0",
        "bootstrap": "^4.5.3",
        "bootstrap-vue": "^2.21.2",
        "core-js": "^3.19.0",
        "cross-env": "^7.0.3",
        "echarts": "^4.9.0",
        "es6-promise": "^4.2.8",
        "jspdf": "^2.3.0",
        "jspdf-autotable": "^3.5.23",
        "jspdf-html2canvas": "^1.4.9",
        "laravel-mix": "^6.0.41",
        "lodash.orderby": "^4.6.0",
        "mini-css-extract-plugin": "^2.5.3",
        "mobile-device-detect": "^0.4.3",
        "moment": "^2.29.1",
        "moment-locales-webpack-plugin": "^1.2.0",
        "nprogress": "^0.2.0",
        "targets-webpack-plugin": "^4.0.0",
        "vee-validate": "^3.4.5",
        "vue": "^2.6.12",
        "vue-barcode": "^1.3.0",
        "vue-clickaway": "^2.2.2",
        "vue-cookie": "^1.1.4",
        "vue-cookies": "^1.7.4",
        "vue-easy-print": "0.0.8",
        "vue-echarts": "^5.0.0-beta.0",
        "vue-excel-xlsx": "^1.2.2",
        "vue-flag-icon": "^1.0.6",
        "vue-good-table": "^2.21.11",
        "vue-html-to-paper": "^1.4.4",
        "vue-i18n": "^8.26.5",
        "vue-image-lightbox-carousel": "^1.0.7",
        "vue-lazyload": "^1.3.3",
        "vue-loader": "^15.9.8",
        "vue-localstorage": "^0.6.2",
        "vue-meta": "^2.4.0",
        "vue-mj-daterangepicker": "^0.1.11",
        "vue-navigation-bar": "^4.1.0",
        "vue-perfect-scrollbar": "^0.2.1",
        "vue-router": "^3.5.3",
        "vue-select": "^3.16.0",
        "vue-simple-spinner": "^1.2.10",
        "vue-sweetalert2": "^3.0.8",
        "vue-upload-multiple-image": "^1.1.6",
        "vue2-daterange-picker": "^0.6.8",
        "vue2-editor": "^2.10.3",
        "vuejs-datepicker": "^1.6.2",
        "vuex": "^3.6.0"
    },
    "devDependencies": {
        "@vue/composition-api": "^1.2.4",
        "@vue/eslint-config-prettier": "^6.0.0",
        "babel-eslint": "^10.1.0",
        "clean-webpack-plugin": "^4.0.0",
        "copy-webpack-plugin": "^6.4.1",
        "eslint-plugin-vue": "^6.2.2",
        "postcss-loader": "^6.2.1",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.49.7",
        "sass-loader": "^8.0.2",
        "vue-template-compiler": "^2.6.14",
        "webpack-bundle-analyzer": "^4.5.0",
        "webpack-cli": "^4.9.2",
        "webpack-i18n-extractor-plugin": "^2.0.7"
    }
}

解决方案 #

1. 修复sass-loader与sass版本兼容性 #

当前sass-loader@8.0.2与sass@1.49.7存在版本冲突，sass-loader@8.x最高兼容sass@1.32.x，过高的sass版本会导致编译报错。执行以下命令降级sass：

npm uninstall sass
npm install sass@1.32.13 --save-dev

2. 使用npm ci替代npm install #

npm ci会严格按照package-lock.json的版本安装依赖，避免版本浮动引发的冲突。操作步骤：

rm -rf node_modules package-lock.json
npm ci

3. 排查特定依赖的编译问题 #

部分依赖（如vue2-editor、vue-upload-multiple-image）安装时需要编译二进制文件，可单独安装测试定位问题：

npm install vue2-editor --save

若该步骤报错，需确保已安装node-gyp及其依赖：

npm install -g node-gyp

Windows用户需额外安装编译工具：

npm install --global --production windows-build-tools

4. 升级Laravel Mix版本 #

当前Laravel Mix版本为6.0.41，升级到最新稳定版可修复已知的依赖兼容问题：

npm update laravel-mix --save-dev

内容的提问来源于stack exchange，提问作者Sheeba Ali