Web3js 在 Vue3 组合 api 项目中导入失败

Question

我用npm init vite bar -- --template vue 创建了一个全新的项目。我已经完成了npm install web3，我可以看到我的package-lock.json 包含这个包。我的node_modules 目录还包括web3 模块。

然后我将此行添加到main.js：

import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3'   <-- This line


createApp(App).mount('#app')

我收到以下错误：

我不明白这里发生了什么。我对使用npm 还很陌生，所以我不太确定谷歌是什么。错误来自node_modules/web3/lib/index.js、node_modules/web3-core/lib/index.js、node_modules/web3-core-requestmanager/lib/index.js，最后是node_modules/util/util.js。我怀疑它与以下之一有关：

1. 我正在使用 Vue 3
2. 我正在使用 Vue 3 组合 API
3. 我正在使用 Vue 3 Composition API SFC <script setup> 标签（但我在 main.js 中导入了它，所以我认为不是这个）
4. web3js 在 Typescript 中，我的 Vue3 项目没有为 Typescript 配置

但由于我对 JavaScript、Vue 和 Web3 还很陌生，所以我不确定如何将我的谷歌搜索重点放在这个错误上。我的背景是 Python、Go、Terraform。基本上是后端的后端。前端 JavaScript 对我来说是新的。

我该如何解决这个问题？

Answer 1

看起来web3 可以在Node 或浏览器中运行，并且web3 包的默认主脚本是原始/未编译的源代码，其中包括特定于Node 的代码（包括process、global、@ 987654327@，可能还有其他人）。

web3 在web3/dist/web3.min.js 分发捆绑脚本，无需任何配置即可在浏览器中运行（列为"pure js"）。您应该在浏览器中导入该特定文件：

// @ts-ignore
import Web3 from 'web3/dist/web3.min.js'

const web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546')

@ts-ignore 注释是 TypeScript 项目中Could not find a declaration file for module 错误的快速解决方法。如果您有 JavaScript 项目，则可以删除评论。

demo

Answer 2

你可以通过在你的 vite 配置中添加这个来避免Uncaught ReferenceError: process is not defined 错误

export default defineConfig({
  // ...
  define: {
    'process.env': process.env
  }
})