awesome-qrGIT
node 安装 awesome-qr 失败，如下
bash
yarn add awesome-qr
bash
yarn add v1.22.22
info No lockfile found.
[1/4] Resolving packages...
warning awesome-qr > canvas > @mapbox/node-pre-gyp > npmlog@5.0.1: This package is no longer supported.
warning awesome-qr > canvas > @mapbox/node-pre-gyp > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
warning awesome-qr > canvas > @mapbox/node-pre-gyp > npmlog > gauge@3.0.2: This package is no longer supported.
warning awesome-qr > canvas > @mapbox/node-pre-gyp > npmlog > are-we-there-yet@2.0.0: This package is no longer supported.
warning awesome-qr > canvas > @mapbox/node-pre-gyp > rimraf > glob@7.2.3: Glob versions prior to v9 are no longer supported
warning awesome-qr > canvas > @mapbox/node-pre-gyp > rimraf > glob > inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[-/2] ⢀ waiting...
error E:\zeyang-work\cosp\cosp-h5\node_modules\canvas: Command failed.
Exit code: 7
Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments:
Directory: E:\zeyang-work\cosp\cosp-h5\node_modules\canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@1.0.11
node-pre-gyp info using node@22.22.0 | win32 | x64
node-pre-gyp http GET https://registry.npmmirror.com/-/binary/canvas/v2.11.2/canvas-v2.11.2-node-v127-win32-unknown-x64.tar.gz
node-pre-gyp ERR! install response status 404 Not Found on https://registry.npmmirror.com/-/binary/canvas/v2.11.2/canvas-v2.11.2-node-v127-win32-unknown-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@22.22.0 (node-v127 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp WARN Hit error response status 404 Not Found on https://registry.npmmirror.com/-/binary/canvas/v2.11.2/canvas-v2.11.2-node-v127-win32-unknown-x64.tar.gz
node-pre-gyp ERR! UNCAUGHT EXCEPTION
node-pre-gyp ERR! stack Error: spawn EINVAL
node-pre-gyp ERR! stack at ChildProcess.spawn (node:internal/child_process:420:11)
node-pre-gyp ERR! stack at Object.spawn (node:child_process:787:9)
node-pre-gyp ERR! stack at module.exports.run_gyp (E:\zeyang-work\cosp\cosp-h5\node_modules\@mapbox\node-pre-gyp\lib\util\compile.js:80:18)
node-pre-gyp ERR! stack at build (E:\zeyang-work\cosp\cosp-h5\node_modules\@mapbox\node-pre-gyp\lib\build.js:41:13)
node-pre-gyp ERR! stack at self.commands.<computed> [as build] (E:\zeyang-work\cosp\cosp-h5\node_modules\@mapbox\node-pre-gyp\lib\node-pre-gyp.js:86:37)
node-pre-gyp ERR! stack at run (E:\zeyang-work\cosp\cosp-h5\node_modules\@mapbox\node-pre-gyp\lib\main.js:81:30)
node-pre-gyp ERR! stack at process.processTicksAndRejections (node:internal/process/task_queues:85:11)
node-pre-gyp ERR! System Windows_NT 10.0.26200
node-pre-gyp ERR! command "D:\\node\\current\\node.exe" "E:\\zeyang-work\\cosp\\cosp-h5\\node_modules\\@mapbox\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
node-pre-gyp ERR! cwd E:\zeyang-work\cosp\cosp-h5\node_modules\canvas
node-pre-gyp ERR! node -v v22.22.0
node-pre-gyp ERR! node-pre-gyp -v v1.0.11
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this comm问题分析：
- 核心报错 ：
canvas2.11.2 没有适配 Node22（ABI v127）的预编译二进制包，404 下载失败；自动切源码编译时spawn EINVAL，Windows 缺少编译环境，编译失败。 - 依赖坑 ：
awesome-qr强依赖canvas（node 原生图形模块），Windows 本地编译极麻烦，还会出现版本兼容断层。 - 环境冲突 ：项目同时存在
package-lock.json+ yarn，包管理器混用也会加剧依赖解析异常。
解决方式：
1：清理锁文件，统一包管理器
bash
# 删除冲突锁文件
rm package-lock.json
rm yarn.lock
rm -rf node_modules2：安装 Windows C++ 编译工具（必须）
bash
#以管理员打开 PowerShell：
npm install -g windows-build-tools
# 或新版官方工具（推荐）
npm install -g @npmcli/node-gyp
bash
npm install -g @npmcli/node-gyp
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@npmcli/node-gyp@6.0.0',
npm WARN EBADENGINE required: { node: '^22.22.2 || ^24.15.0 || >=26.0.0' },
npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }
added 1 package in 2s3：降级 Node 版本（关键）
canvas@2.11.2 最高只支持 Node 20，你的 Node22 无预编译包，切换 Node 20 LTS
bash
# nvm 切换（有nvm情况下）
nvm install 20
nvm use 204：重新安装
bash
yarn install
yarn add awesome-qr结果 如下：
bash
yarn add awesome-qr
yarn add v1.22.22
info No lockfile found.
[1/4] Resolving packages...
warning awesome-qr > canvas > @mapbox/node-pre-gyp > npmlog@5.0.1: This package is no longer supported.
warning awesome-qr > canvas > @mapbox/node-pre-gyp > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
warning awesome-qr > canvas > @mapbox/node-pre-gyp > npmlog > are-we-there-yet@2.0.0: This package is no longer supported.
warning awesome-qr > canvas > @mapbox/node-pre-gyp > npmlog > gauge@3.0.2: This package is no longer supported.
warning awesome-qr > canvas > @mapbox/node-pre-gyp > rimraf > glob@7.2.3: Glob versions prior to v9 are no longer supported
warning awesome-qr > canvas > @mapbox/node-pre-gyp > rimraf > glob > inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 83 new dependencies.
info Direct dependencies
├─ awesome-qr@2.1.5-rc.0
├─ html2canvas@1.4.1
├─ vconsole@3.15.1
└─ vue@3.5.39
info All dependencies
├─ @babel/helper-string-parser@7.29.7
├─ @babel/helper-validator-identifier@7.29.7
├─ @babel/runtime@7.29.7
├─ @babel/types@7.29.7
├─ @jridgewell/sourcemap-codec@1.5.5
├─ @mapbox/node-pre-gyp@1.0.11
├─ @vue/compiler-sfc@3.5.39
├─ @vue/runtime-core@3.5.39
├─ @vue/runtime-dom@3.5.39
├─ @vue/server-renderer@3.5.39
├─ abbrev@1.1.1
├─ agent-base@6.0.2
├─ ansi-regex@5.0.1
├─ aproba@2.1.0
├─ are-we-there-yet@2.0.0
├─ awesome-qr@2.1.5-rc.0
├─ balanced-match@1.0.2
├─ base64-arraybuffer@1.0.2
├─ base64-js@1.5.1
├─ brace-expansion@1.1.15
├─ buffer@6.0.3
├─ canvas@2.11.2
├─ chownr@2.0.0
├─ color-support@1.1.3
├─ concat-map@0.0.1
├─ console-control-strings@1.1.0
├─ copy-text-to-clipboard@3.2.2
├─ core-js@3.49.0
├─ css-line-break@2.1.0
├─ csstype@3.2.3
├─ decompress-response@4.2.1
├─ delegates@1.0.0
├─ detect-libc@2.1.2
├─ emoji-regex@8.0.0
├─ entities@7.0.1
├─ fs-minipass@2.1.0
├─ fs.realpath@1.0.0
├─ gauge@3.0.2
├─ glob@7.2.3
├─ has-unicode@2.0.1
├─ html2canvas@1.4.1
├─ https-proxy-agent@5.0.1
├─ ieee754@1.2.1
├─ inflight@1.0.6
├─ inherits@2.0.4
├─ is-fullwidth-code-point@3.0.0
├─ js-binary-schema-parser@2.0.3
├─ magic-string@0.30.21
├─ make-dir@3.1.0
├─ mimic-response@2.1.0
├─ minimatch@3.1.5
├─ minizlib@2.1.2
├─ mkdirp@1.0.4
├─ ms@2.1.3
├─ mutation-observer@1.0.3
├─ nan@2.28.0
├─ nanoid@3.3.15
├─ node-fetch@2.7.0
├─ nopt@5.0.0
├─ npmlog@5.0.1
├─ object-assign@4.1.1
├─ path-is-absolute@1.0.1
├─ picocolors@1.1.1
├─ postcss@8.5.16
├─ readable-stream@3.6.2
├─ rimraf@3.0.2
├─ safe-buffer@5.2.1
├─ semver@7.8.5
├─ set-blocking@2.0.0
├─ signal-exit@3.0.7
├─ simple-concat@1.0.1
├─ simple-get@3.1.1
├─ string_decoder@1.3.0
├─ string-width@4.2.3
├─ tar@6.2.1
├─ text-segmentation@1.0.3
├─ tr46@0.0.3
├─ util-deprecate@1.0.2
├─ vconsole@3.15.1
├─ vue@3.5.39
├─ webidl-conversions@3.0.1
├─ whatwg-url@5.0.0
└─ wide-align@1.1.5
Done in 5.29s.其他替代库使用
qrcode（轻量通用）
bash
# 先卸载失败的包
yarn remove awesome-qr
# 安装纯前端二维码
yarn add qrcode
# TS项目额外装类型
yarn add -D @types/qrcodeqrcode-vue /vue-qr（Vue 项目专用，带 logo、渐变）
bash
yarn remove awesome-qr
yarn add vue-qr