Vue 开发样板中的随机错误 "ethereum is not defined"

Question

如果这是一个愚蠢的问题，我深表歉意，但我才刚刚开始修补 Vue 和 web3！

我正在尝试使用由 vue-cli 创建的 Vue 基本样板在非常基本的 Vue3 组件中实现 web3，但我遇到了一些奇怪的错误。

首先，这是我的组件的代码：

<template>
  <img alt="Vue logo" src="./assets/images/logo.png">
  <pre v-if="account">{{ account }}</pre>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      account: undefined
    }
  },
  async mounted() {
    if (typeof ethereum !== 'undefined') {
      const accounts = await ethereum.request({ method: 'eth_requestAccounts' })
      this.account = accounts[0]
    }
  }
}
</script>

我运行遇到的第一个问题是，当我使用 npm run serve 启动环境并更改我的组件中的一些代码时，我的测试出现以下错误 window 以及在我的终端中：

Failed to compile.

./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/home/arnaud/Code/_BLOCKCHAIN/crypto-app/src/App.vue
  16:30  error  'ethereum' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

第二个奇怪的行为是，有时在启动环境时我的终端中也会出现此错误，但有时不会。当我在开始时没有错误，并且如果我不更改代码中的任何内容，我的应用程序似乎运行没有错误。

我做了一些研究，但目前我没有找到任何对我有帮助的东西:/

Answer 1

这是一个 eslint 错误，因为您正试图在未声明它的范围内使用 ethereum 变量。如果 ethereum 已在全局范围内声明。您可以禁用此行的 eslint。

async mounted() {
      // eslint-disable-next-line no-undef
    if (typeof ethereum !== 'undefined') {
      // eslint-disable-next-line no-undef
      const accounts = await ethereum.request({ method: 'eth_requestAccounts' })
      this.account = accounts[0]
    }

否则你将不得不define/import组件中的以太坊。

Answer 2

先安装 metamask 扩展，然后检查以太坊实例

const {ethereum} =window;

Vue 开发样板中的随机错误 "ethereum is not defined"

Random error "ethereum is not defined" in Vue development boilerplate

vue.js

web3

metamask