如何在Nuxt 3项目中集成ethers.js或web3.js？

Ethers.js 集成步骤 #

1. 安装依赖
   执行命令安装最新稳定版：

npm install ethers
# 或 yarn add ethers

2. 配置Nuxt避免SSR打包错误
   在nuxt.config.ts中添加外部依赖声明，防止服务端打包时处理ethers：

export default defineNuxtConfig({
  build: {
    external: ['ethers'],
  }
})

3. 客户端环境使用
   由于Nuxt3是SSR框架，必须确保ethers代码只在客户端执行，可通过process.client判断或放在onMounted钩子中：

<script setup>
import { ethers } from 'ethers'
const config = useRuntimeConfig()

onMounted(async () => {
  if (process.client) {
    // 初始化RPC Provider（替换为你的Infura/Alchemy等节点地址）
    const provider = new ethers.JsonRpcProvider(config.public.rpcUrl)
    // 示例：获取当前区块号
    const blockNumber = await provider.getBlockNumber()
    console.log('当前区块号:', blockNumber)
  }
})
</script>

可将RPC地址存入nuxt.config.ts的runtimeConfig中，避免硬编码：

export default defineNuxtConfig({
  build: {
    external: ['ethers'],
  },
  runtimeConfig: {
    public: {
      rpcUrl: 'https://mainnet.infura.io/v3/你的API_KEY'
    }
  }
})

Web3.js 集成步骤 #

1. 安装依赖

npm install web3
# 或 yarn add web3

2. Nuxt配置
   同样在nuxt.config.ts中添加外部依赖：

export default defineNuxtConfig({
  build: {
    external: ['web3'],
  }
})

3. 客户端使用示例
   连接MetaMask钱包并获取账户：

<script setup>
import Web3 from 'web3'

onMounted(async () => {
  if (process.client && window.ethereum) {
    const web3 = new Web3(window.ethereum)
    // 请求用户授权钱包
    await window.ethereum.request({ method: 'eth_requestAccounts' })
    const accounts = await web3.eth.getAccounts()
    console.log('当前授权账户:', accounts[0])
  }
})
</script>

常见错误排查 #

• window is not defined：必须将区块链交互代码限制在客户端环境，用process.client判断或放在onMounted/useClientOnly组件内。
• 打包编译错误：确保在nuxt.config.ts的build.external中添加ethers/web3，避免服务端打包时解析浏览器环境依赖。
• 版本兼容问题：优先使用稳定版本，ethers推荐v6.x，web3推荐v4.x，避免与Nuxt3的打包工具冲突。

替代工具推荐 #

• Viem：轻量级以太坊交互库，体积远小于ethers/web3，API设计更简洁现代，对Nuxt3支持友好。
  示例使用：

  <script setup>
  import { createPublicClient, http } from 'viem'
  import { mainnet } from 'viem/chains'
  
  onMounted(async () => {
    if (process.client) {
      const client = createPublicClient({
        chain: mainnet,
        transport: http('https://mainnet.infura.io/v3/你的API_KEY'),
      })
      const blockNumber = await client.getBlockNumber()
      console.log(blockNumber)
    }
  })
  </script>
  

• Wagmi：基于Viem的钱包集成工具，提供开箱即用的钱包连接、合约调用、状态管理等功能，适合需要完整钱包交互的场景。

内容的提问来源于stack exchange，提问作者Younoch