ganache已安装在vue应用程序中,但未检测到

我启动了一个全新的vue项目(vue2),并安装了ganache和web3。当我尝试启动应用程序时,出现以下错误:

* ganache in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&

这是我的包裹。json看起来像:

{
  "name": "unrival_client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ganache": "^6.4.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "web3": "^1.6.1"
  },
  "devDependencies": {
    "@vue/cli": "^4.5.15",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/cli-service-global": "^4.5.15",
    "babel-eslint": "^10.1.0",
    "core-js": "^2.6.12",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

编辑:以下是我的vue组件的外观:

<template>
  <div class="hello">
    hi
  </div>
</template>

<script>
const Web3 = require("web3");
const ganache = require("ganache");
const web3 = new Web3(ganache.provider(), null, { transactionConfirmationBlocks: 1 });


export default {
    name: 'HelloWorld',
    created () {
        console.log(web3)
    }
}
</script>

编辑:我在使用es6样式导入时也遇到了这个错误:

import Web3 from "web3";
import ganache from "ganache";
const web3 = new Web3(ganache.provider(), null, { transactionConfirmationBlocks: 1 });

我尝试重新运行错误消息中建议的命令,但没有帮助。有人知道会出什么问题吗?