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

Posted 2023-02-18

【中文标题】Web3js 在 Vue3 组合 api 项目中导入失败

【英文标题】：Web3js fails to import in Vue3 composition api project

【发布时间】：2021-10-28 17:12:57

【问题描述】：

我用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。我怀疑它与以下之一有关：

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

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

我该如何解决这个问题？

【问题讨论】：

哇，好吧，我找到了这条评论：github.com/vitejs/vite/issues/1973#issuecomment-787571499

然后我得到Uncaught ReferenceError: global is not defined 并出现类似的错误链......

【参考方案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

【讨论】：

谢谢@tony19，这是有道理的。我会尽快尝试，并在确认后将您的答案视为正确答案。

【参考方案2】：

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

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