Vue3 Composition API项目导入Web3js出现process未定义如何解决

问题根源 #

该报错与你猜测的Vue3版本、Composition API、<script setup>语法、TypeScript配置均无关联，核心原因如下：

• Vite作为面向浏览器原生ES模块的构建工具，默认不会注入Node.js环境专属的process全局变量，也不会自动适配Node.js核心模块（如报错路径中出现的util模块）
• web3.js为了同时兼容Node.js与浏览器运行环境，默认依赖了上述Node.js专属能力，在未做适配的Vite项目中运行就会触发该错误

解决方案 #

方案一：直接引入web3预构建的浏览器版本（操作最简单，无需额外配置） #

无需修改任何项目配置，仅调整main.js中的web3导入语句即可：

// 把原有导入语句
// import Web3 from 'web3'
// 替换为
import Web3 from 'web3/dist/web3.min.js'

web3官方已经提前打包好了适配浏览器环境的版本，内部已经处理了所有Node.js专属依赖的兼容问题，替换后直接重启项目即可正常运行。

方案二：全局配置Node.js依赖polyfill（适合需要自定义依赖适配的场景） #

如果需要使用web3的原生导入方式，可以按以下步骤配置Vite的兼容能力：

1. 安装必要的polyfill依赖

npm install process util buffer

2. 修改项目根目录下的vite.config.js配置文件，注入全局变量与模块适配：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 注入Node.js全局变量
  define: {
    'process.env': {},
    global: 'window'
  },
  // 适配Node.js核心模块
  resolve: {
    alias: {
      util: 'util/'
    }
  }
})

3. 在main.js的最顶部挂载全局依赖：

import { Buffer } from 'buffer'
import process from 'process'
window.Buffer = Buffer
window.process = process

// 后续保留你原有代码即可
import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3'

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

配置完成后重启项目即可解决报错。

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