DAPP开发 在Vue使用MetaMask API无效的问题

Vue 版本 3.2.25

MetaMask 版本 10.8.1

Chromium 版本 90.0.4430.93（正式版本） （64 位）

使用 mounted 获取

  mounted() {
    console.log(window.ethereum.selectedAddress);
   },

结果为：

0x348f....

但是在使用 npm run bulid 后

null

进一步测试

  mounted() {
    console.log(typeof window.ethereum);
    console.log(window.ethereum);
    console.log(window.ethereum.selectedAddress)
  },
object
Proxy {_events: {…}, _eventsCount: 1, _maxListeners: 100, _log: u, _state: {…}, …}
null

但是在浏览器 console 中就不存在这样的问题

ethereum
Proxy {_events: {…}, _eventsCount: 1, _maxListeners: 100, _log: u, _state: {…}, …}

ethereum.selectedAddress
"0x348fd452409cf4dd75027394394bef9ec2f09213"

猜测是 MetaMask 获取selectedAddress 需要一定的时间，存在执行顺序的问题,但是Vue生命周期似乎又 Mounted 之前 mounted之后的钩子，

最后解决方案 Promise：

  mounted() {
    console.log(typeof window.ethereum);
    console.log(window.ethereum);
    // 异步实现浏览器MetaMask API 后加载问题
    this.sleep(500).then(() => {
      // console.log(window.ethereum.selectedAddress);
    })

  },
  methods: {
    // 异步实现浏览器MetaMask API 后加载问题
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    }
  }

至于在dev为什么不存在这样的问题：

dev

30 requests
10.2 MB transferred
10.2 MB resources
Finish: 896 ms
DOMContentLoaded: 800 ms
Load: 907 ms

build

0 requests
2.0 MB transferred
2.0 MB resources
Finish: 813 ms
DOMContentLoaded: 295 ms
Load: 420 ms

或许是dev下过多的依赖刚好给予了 metamask 足够的时间 生效。

这样说的话 或者build 后依赖足够多 或者 metamask 足够快 网站上线后 加上网络延迟 是否就不存在这个问题了。。。