Vite构建部署后WalletConnectButton禁用无法连接问题求助

WalletConnectButton本身是兼容Vite的，你遇到的构建后按钮禁用问题，核心原因是生产构建环境下钱包检测逻辑失效，以下是针对性的排查和解决步骤：

1. 补全Node.js Polyfills依赖 #

你的当前配置仅添加了stream的polyfill，但WalletConnect还依赖crypto、util等Node.js内置模块，生产构建时这些缺失会导致钱包检测逻辑异常。修改Vite配置如下：

import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    nodePolyfills({
      include: ['stream', 'crypto', 'util', 'buffer', 'process'],
      globals: {
        Buffer: true,
        process: true,
      }
    })
  ],
  build: {
    rollupOptions: {
      plugins: [
        nodePolyfills({
          include: ['stream', 'crypto', 'util', 'buffer', 'process'],
          globals: {
            Buffer: true,
            process: true,
          }
        })
      ],
      // 临时关闭tree-shaking避免必要代码被误删
      treeshake: false
    }
  }
});

2. 确保环境变量正确注入 #

如果使用WalletConnect v2，生产构建时必须正确传入项目ID。Vite中环境变量需以VITE_为前缀，在.env.production中配置：

VITE_WALLETCONNECT_PROJECT_ID=你的项目ID

代码中通过import.meta.env.VITE_WALLETCONNECT_PROJECT_ID获取，避免使用process.env（即使加了polyfill，生产环境变量注入逻辑仍有差异）。

3. 修复钱包检测逻辑的构建兼容性 #

WalletConnect依赖window.ethereum等全局对象检测钱包，生产构建的压缩混淆可能破坏检测逻辑。在代码中显式保留全局对象检测：

// 确保钱包初始化代码在浏览器环境执行
if (typeof window !== 'undefined') {
  // 监听钱包初始化事件，触发重新检测
  window.addEventListener('ethereum#initialized', () => {
    // 调用WalletConnect的重新检测方法，比如你的按钮组件的refreshWallets方法
    yourWalletConnectButtonInstance?.refreshWallets();
  });
}

4. 开启调试日志排查 #

临时在生产构建中开启WalletConnect的调试模式，查看控制台日志定位具体错误：

import { createWalletConnect } from '@walletconnect/client';

const wcClient = createWalletConnect({
  projectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
  // 临时开启调试
  debug: true
});

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