Ionic Vue中Webpack 5 Polyfill问题处理求助

Webpack 5移除了Node.js核心模块的默认polyfill，而CosmJS的@cosmjs/proto-signing依赖crypto等Node.js模块，直接设置resolve.fallback: { "crypto": false }会导致加密相关逻辑失效，进而让应用无法正常运行。以下是可行的解决步骤：

1. 安装必要的Polyfill依赖 #

执行命令安装缺失的浏览器端polyfill包：

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process --save-dev

2. 配置Webpack的Fallback和全局变量 #

在项目根目录创建或修改vue.config.js，添加Webpack配置：

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"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url"),
        "buffer": require.resolve("buffer")
      }
    },
    plugins: [
      // 全局注入process和Buffer对象
      new webpack.ProvidePlugin({
        process: 'process/browser',
        Buffer: ['buffer', 'Buffer']
      })
    ],
    // 忽略source map解析警告（可选）
    ignoreWarnings: [/Failed to parse source map/]
  }
});

3. TypeScript项目额外配置（可选） #

如果你的项目使用TypeScript，需要：

• 安装Node.js类型声明：

npm install @types/node --save-dev

• 修改tsconfig.json，添加node类型：

{
  "compilerOptions": {
    // 保留原有配置，添加以下内容
    "types": ["node"]
  }
}

4. 重启开发服务 #

完成上述配置后，重启Ionic开发服务器：

ionic serve

此时导入DirectSecp256k1HdWallet应该可以正常运行，Webpack会使用浏览器端polyfill替代Node.js核心模块，同时保证CosmJS的加密功能正常工作。

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