解决引入ethereumjs-wallet报错Uncaught ReferenceError: process is defined

最近在学习web3.0开发DApp的视频教程，遇到用助记词生成秘钥对报错Uncaught ReferenceError: process is defined。具体报错如下截图：

在网上搜了好几个小时都没找到解决方法。突然在学习的视频论坛找到有哥们说是引入的包不兼容问题导致报这个错。我试了还真是这个这个问题所致。太坑了！

我的项目修改后能正常运行引入包如下：

├── @babel/core@7.25.2
├── @vue/cli-plugin-babel@5.0.8
├── @vue/cli-service@5.0.8
├── bip39@3.0.4
├── core-js@3.38.0
├── ethereumjs-tx@1.3.7
├── ethereumjs-util@7.1.5
├── ethereumjs-wallet@1.0.2
├── less-loader@4.1.0
├── less@3.9.0
├── node-polyfill-webpack-plugin@2.0.1
├── unplugin-vue-components@0.22.12
├── vant@4.0.7
├── vue@3.4.37
└── web3@1.8.1

我的代码如下：

<template><h1>助记词</h1><p>{{ mnmonic }}</p><button @click="genMnemonic()">生成seed</button><p>{{ seed }}</p><div>hello</div>
</template><script setup>
import { ref } from "vue";
// import * as bip39 from 'bip39';
import { generateMnemonic, mnemonicToSeed } from "bip39";
import { hdkey } from "ethereumjs-wallet";//创建助记词
// const mnmonic = bip39.generateMnemonic();
const mnmonic = ref('night raw collect flash yellow lift truly cram turtle banana fancy quiz');
console.log(mnmonic);//生成秘钥对 keypair
const genMnemonic = async () => {const seed = await mnemonicToSeed(mnmonic.value);const hdWallet = hdkey.fromMasterSeed(seed);const keypair = hdWallet.derivePath("m/44'/60'/0'/0/0");console.log('打印:', keypair);
};genMnemonic();</script><style lang='less' scoped></style>

若大家有问题请留言。