Vue CLI项目中Webpack resolve.fallback无法解决crypto模块缺失问题

问题背景 #

用 Vue CLI 创建的项目（基于 Webpack 5+），引入 aws4 模块做 AWS 请求签名时，启动报错，提示找不到 crypto、url、querystring 等 Node.js 核心模块。已知 Webpack 5 不再默认提供 Node 核心模块的 polyfill，但按提示配置后问题仍未解决，新建纯净 Vue 2 项目仅引入 aws4 和 axios 也复现问题，怀疑配置未被正确应用。

报错信息 #

ERROR in ./node_modules/aws4/aws4.js 4:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\henry\Repos\AWS4 TEST\aws4-test\node_modules\aws4'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

已尝试的无效方案 #

• 手动创建 webpack.config.js 配置 resolve.fallback 并安装 crypto-browserify
• 在 package.json 中添加 browser 字段："crypto": false
• 在 tsconfig.json 的 compilerOptions.paths 中映射 crypto 到拼写错误的 crypto-browerify
• 使用 node-polyfill-webpack-plugin，仅解决了 url 和 querystring 问题，crypto 报错依旧

解决步骤 #

Vue CLI 项目不会直接读取根目录的 webpack.config.js，必须通过 vue.config.js 配置 Webpack 选项，以下是完整可行方案：

1. 安装所有所需 polyfill 依赖：

npm install crypto-browserify stream-browserify buffer url querystring-es3 process --save-dev

2. 在项目根目录创建/修改 vue.config.js，添加如下配置：

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
        buffer: require.resolve('buffer'),
        url: require.resolve('url'),
        querystring: require.resolve('querystring-es3')
      }
    },
    plugins: [
      // 全局注入 Buffer 和 process 对象，避免 aws4 运行时找不到
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
        process: 'process/browser'
      })
    ]
  }
})

3. 重启项目，验证错误是否消失：

npm run serve

关键说明 #

• Vue CLI 会维护自己的 Webpack 配置，自定义的 webpack.config.js 不会被自动合并，必须通过 vue.config.js 中的 configureWebpack 或 chainWebpack 来修改配置
• aws4 除了依赖 crypto，还间接依赖 stream、Buffer、process 等 Node 环境对象，需要一并配置 polyfill
• 之前的 tsconfig 配置存在拼写错误，且即使修正，也无法替代 Webpack 的 fallback 配置

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