客户端Web应用报ReferenceError: web3未定义，求Metamask连接方案

我来帮你搞定这个头疼的错误，咱们从问题根源和正确实践两方面来梳理：

为什么会出现这个错误？ #

你遇到的核心问题大概率是现代MetaMask不再默认注入web3对象了——旧版MetaMask会自动往全局作用域塞web3，但现在官方已经切换到window.ethereum作为标准注入对象，你的代码还在依赖旧的web3注入逻辑，自然会触发未定义的错误。另外也要先排查基础的文件加载问题。

分步解决 & 正确连接代码 #

1. 先确认web3.js文件加载正常 #

检查你的src="js/web3.min.js"路径是否正确：

• 确保HTML文件所在目录下存在js文件夹，且里面确实有web3.min.js（建议用web3.js v1.x版本，兼容性更好）
• 打开浏览器控制台（F12）切换到「Network」标签，刷新页面，搜索web3.min.js，看是否返回200状态（如果是404，说明路径错了）

2. 替换为MetaMask官方推荐的连接逻辑 #

把你原来的代码替换成下面的版本，兼容新旧钱包，同时适配现代MetaMask的API：

<script language="javascript" type="text/javascript" src="js/web3.min.js"></script>
<script>
window.addEventListener('load', async function() {
  let web3js;
  // 优先检测现代MetaMask/钱包注入的ethereum对象
  if (window.ethereum) {
    try {
      // 请求用户授权连接钱包（这一步是必须的，MetaMask不会自动连接）
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      // 用ethereum作为provider初始化web3实例
      web3js = new Web3(window.ethereum);
      // 测试：获取当前连接的账户
      const accounts = await web3js.eth.getAccounts();
      console.log("已连接钱包账户：", accounts[0]);
    } catch (err) {
      console.error("连接失败：用户拒绝授权或发生错误", err);
      return;
    }
  } 
  // 兼容旧版本注入web3的钱包（比如老版MetaMask、其他小众钱包）
  else if (typeof web3 !== 'undefined') {
    web3js = new Web3(web3.currentProvider);
  } 
  // 没有钱包的情况，回退到自定义节点
  else {
    web3js = new Web3(new Web3.providers.HttpProvider("http://10.50.0.3:22000"));
    console.warn("未检测到钱包，已切换到自定义节点");
  }

  // 确保web3实例初始化成功后再启动你的应用
  if (web3js) {
    startApp();
  }
});
</script>

3. 其他可能的排查点 #

• 浏览器缓存问题：按Ctrl+F5强制刷新页面，清除旧的缓存资源
• web3版本冲突：如果你之前引入过其他版本的web3，可能会有冲突，建议只保留一个版本的web3.js文件
• 作用域问题：确保web3js的作用域能覆盖到startApp()函数（比如把它声明为全局变量，或者在startApp()内部接收这个实例）

关键说明 #

• 现代MetaMask要求必须通过eth_requestAccounts请求用户授权，才能获取账户信息，不能像旧版那样直接读取web3.accounts
• 用async/await处理异步操作，避免回调地狱，同时保证操作的顺序执行

内容的提问来源于stack exchange，提问作者Nana Agyei-kena