在Vue中使用@walletconnect/web3-provider时浏览器控制台报错

错误原因 #

浏览器环境默认不存在Node.js中的global全局对象，而@walletconnect/web3-provider的底层依赖代码尝试访问该对象，因此抛出引用错误。

解决方案 #

1. Vue CLI（Webpack）项目

在项目根目录的public/index.html的<head>标签内添加以下代码，提前将window映射为global：

<script>
  window.global = window;
</script>

2. Vite项目

方案一：直接定义全局变量

修改vite.config.ts（或vite.config.js），添加全局变量映射：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  define: {
    'global': 'window'
  }
})

方案二：使用Node全局对象Polyfill插件

适合依赖更多Node.js全局对象的复杂场景：

• 安装依赖：

npm install @esbuild-plugins/node-globals-polyfill --save-dev

• 更新vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
          global: true
        })
      ]
    }
  }
})

额外优化建议 #

避免在模块顶层直接实例化WalletConnectProvider，建议在组件内异步初始化，防止初始化时机过早导致的潜在问题：

import WalletConnectProvider from "@walletconnect/web3-provider";

async function initWalletConnect() {
  const provider = new WalletConnectProvider({
    infuraId: "e4ea80f8c3764a1ea0a582a4846d708c"
  });
  // 启用钱包连接
  await provider.enable();
  // 后续处理逻辑，比如获取账户地址、链ID等
  const accounts = await provider.request({ method: 'eth_accounts' });
  console.log('Connected accounts:', accounts);
}

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