Electron & vue3-vite打包报错，用到了sharp，如何解决？

Question

Electron & vue3-vite打包报错，用到了sharp， 帮忙指点一下 谢谢， node版本16.20、18.18、20.10都试过

✓ built in 14ms
  • electron-builder  version=24.6.4 os=10.0.22631
  • loaded configuration  file=D:\word\project\美蓉\cc\electron-builder.json5
  • description is missed in the package.json  appPackageFile=D:\word\project\美蓉\cc\package.json
  • author is missed in the package.json  appPackageFile=D:\word\project\美蓉\cc\package.json
  • writing effective config  file=release\0.0.0\builder-effective-config.yaml
  • rebuilding native dependencies  dependencies=canvas@2.11.2, sharp@0.32.6 platform=win32 arch=x64
  • install prebuilt binary  name=sharp version=0.32.6 platform=win32 arch=x64 napi=
  ⨯ cannot execute  cause=exit status 1
                    errorOut=npm ERR! code 1
    npm ERR! path D:\word\project\美蓉\cc\node_modules\canvas
    npm ERR! command failed
    npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build --update-binary
    npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --update-binary --module=D:\word\project\美蓉\cc\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=D:\word\project\美蓉\cc\node_modules\canvas\build\Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=electron-v26.5' (1)
    npm ERR! node-pre-gyp info it worked if it ends with ok
    npm ERR! node-pre-gyp info using node-pre-gyp@1.0.11
    npm ERR! node-pre-gyp info using node@18.18.0 | win32 | x64
    npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-electron-v26.5-win32-unknown-x64.tar.gz
    npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-electron-v26.5-win32-unknown-x64.tar.gz
    npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and electron@26.5.0 (electron-v26.5 ABI, unknown) (falling back to source compile with node-gyp)
    npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-electron-v26.5-win32-unknown-x64.tar.gz
    npm ERR! gyp info it worked if it ends with ok
    npm ERR! gyp info using node-gyp@9.4.0
    npm ERR! gyp info using node@18.18.0 | win32 | x64
    npm ERR! gyp info ok
    npm ERR! gyp info it worked if it ends with ok
    npm ERR! gyp info using node-gyp@9.4.0
    npm ERR! gyp info using node@18.18.0 | win32 | x64
    npm ERR! gyp info find Python using Python version 3.10.11 found at "C:\Users\13260\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\python.exe"
    npm ERR! gyp ERR! find VS
    npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
    npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
    npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
    npm ERR! gyp ERR! find VS not looking for VS2015 as it is only supported up to Node.js 18
    npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
    npm ERR! gyp ERR! find VS
    npm ERR! gyp ERR! find VS **************************************************************
    npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
    npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
    npm ERR! gyp ERR! find VS For more information consult the documentation at:
    npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
    npm ERR! gyp ERR! find VS **************************************************************
    npm ERR! gyp ERR! find VS
    npm ERR! gyp ERR! configure error
    npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
    npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
    npm ERR! gyp ERR! stack     at D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16
    npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:380:14)
    npm ERR! gyp ERR! stack     at D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14
    npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2015 (D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:364:14)
    npm ERR! gyp ERR! stack     at D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:67:12
    npm ERR! gyp ERR! stack     at failPowershell (D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:156:7)
    npm ERR! gyp ERR! stack     at VisualStudioFinder.parseData (D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:170:14)
    npm ERR! gyp ERR! stack     at D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:143:14
    npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:414:7)
    npm ERR! gyp ERR! System Windows_NT 10.0.22631
    npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\zRuanjian\\nvm\\v18.18.0\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=D:\\word\\project\\美蓉\\cc\\node_modules\\canvas\\build\\Release\\canvas.node" "--module_name=canvas" "--module_path=D:\\word\\project\\美蓉\\cc\\node_modules\\canvas\\build\\Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=electron-v26.5"
    npm ERR! gyp ERR! cwd D:\word\project\美蓉\cc\node_modules\canvas
    npm ERR! gyp ERR! node -v v18.18.0
    npm ERR! gyp ERR! node-gyp -v v9.4.0
    npm ERR! gyp ERR! not ok
    npm ERR! node-pre-gyp ERR! build error
    npm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe D:\zRuanjian\nvm\v18.18.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --update-binary --module=D:\word\project\美蓉\cc\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=D:\word\project\美蓉\cc\node_modules\canvas\build\Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=electron-v26.5' (1)
    npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (D:\word\project\美蓉\cc\node_modules\@mapbox\node-pre-gyp\lib\util\compile.js:89:23)
    npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:517:28)
    npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1098:16)
    npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:303:5)
    npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.22631
    npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\word\\project\\美蓉\\cc\\node_modules\\@mapbox\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" "--update-binary"       
    npm ERR! node-pre-gyp ERR! cwd D:\word\project\美蓉\cc\node_modules\canvas
    npm ERR! node-pre-gyp ERR! node -v v18.18.0
    npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
    npm ERR! node-pre-gyp ERR! not ok

    npm ERR! A complete log of this run can be found in: C:\Users\13260\AppData\Local\npm-cache\_logs\2024-03-26T09_57_13_613Z-debug-0.log

                    command='C:\Program Files\nodejs\node.exe' 'D:\zRuanjian\nvm\v18.18.0\node_modules\npm\bin\npm-cli.js' rebuild canvas@2.11.2
                    workingDir=

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

根据报错信息来看，是canvas和sharp的依赖安装失败了。需要检查一下它们的版本是否与electron和node版本兼容，以及是否有必要的编译工具和依赖库。 建议先检查一下需要安装的依赖和编译工具是否都已经安装完毕，然后再尝试重新安装canvas和sharp的依赖，或者降低它们的版本号，以解决版本兼容性问题。 以下是可能的解决方案：

1. 确保已经安装了必要的编译工具和依赖库： 对于Windows系统，需要安装Visual Studio和Python，可以使用以下命令来安装：

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

1. 检查依赖的版本是否与electron和node版本兼容： 可以先尝试降低canvas和sharp的版本号，或者查看它们的官方文档，以确定它们是否与当前的electron和node版本兼容。 例如，如果electron版本是14.x，那么安装依赖时可以选择安装适用于electron v14.x的版本：

npm install canvas@^2.11.2 --save
npm install sharp@^0.32.6 --save

1. 尝试重新安装依赖： 如果以上方法不起作用，可以尝试删除node_modules文件夹并重新安装依赖：

rm -rf node_modules/
npm install

另外，代码中的错误信息比较长，建议将其格式化输出，以便查看和排查问题。 例如，可以使用以下代码来将错误信息格式化为易于阅读的 JSON 格式：

console.log(JSON.stringify(error, null, 2));

这样可以更方便地找到问题所在，并进行调试。