javascript - 在VueJS中生成bip39助记词，出现错误Uncaught ReferenceError : global is not defined

Question

我正在使用 VueJS v3 并尝试使用 bip39 库生成和显示 BIP39 助记符。但是我在浏览器控制台中收到错误:

Uncaught ReferenceError: global is not defined  _stream_readable.js:48:20
    js _stream_readable.js:48
    __require chunk-PWNRNYY6.js:23
    js readable-browser.js:1
    __require chunk-PWNRNYY6.js:23
    js index.js:3
    __require chunk-PWNRNYY6.js:23
    js index.js:3
    __require chunk-PWNRNYY6.js:23
    js browser.js:3
    __require chunk-PWNRNYY6.js:23
    js index.js:3
    __require chunk-PWNRNYY6.js:23
    <anonymous> bip39:1

    js _stream_readable.js:48
    __require chunk-PWNRNYY6.js:23
    js readable-browser.js:1
    __require chunk-PWNRNYY6.js:23
    js index.js:3
    __require chunk-PWNRNYY6.js:23
    js index.js:3
    __require chunk-PWNRNYY6.js:23
    js browser.js:3
    __require chunk-PWNRNYY6.js:23
    js index.js:3
    __require chunk-PWNRNYY6.js:23
    <anonymous> bip39:1
    InnerModuleEvaluation self-hosted:2393
    InnerModuleEvaluation self-hosted:2393
    InnerModuleEvaluation self-hosted:2393
    InnerModuleEvaluation self-hosted:2393
    evaluation self-hosted:2354

<script setup>
import { generateMnemonic } from "bip39";
import {ref} from "vue";
let mnemonic = ref(null);
mnemonic.value = generateMnemonic();
</script>

<template>
  <div v-if="mnemonic !== null">
   <h1>{{ mnemonic }}</h1>
  </div>
</template>

包.json

{
  "name": "vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 5050"
  },
  "dependencies": {
    "bip39": "^3.0.4",
    "pinia": "^2.0.11",
    "vue": "^3.2.31",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.2",
    "vite": "^2.8.4"
  }
}

我可以在 Vue 之外使用简单的 .js 使其工作。

Answer 1

这是一个有效解决方案的现场演示:
https://codesandbox.io/s/bip39-vue-demo-5nlzy4

但不得不说，我尝试该模块的过程并不轻松。我认为它设计为在服务器端运行，而不是像这样在浏览器中运行。如果您在生产中使用它，可能还需要考虑一些安全注意事项，但这是一个单独的问题。

这是 working我构建的 Vue 组件用于演示用法:

<template>
  <div class="hello">
      <div v-if="mnemonic">
        <p><b>Result</b>: {{ mnemonic }} </p>
      </div>
      <div v-else>Loading....</div>
  </div>
</template>

<script>

import { mnemonicToSeed } from 'bip39';

export default {
  name: "GenerateMnemonic",
  props: {
    msg: String
  },
   data() {
    return {
      mnemonic: null,  
    };
  },
  mounted() {
    mnemonicToSeed('basket actual')
      .then(bytes => bytes.toString('hex'))
      .then((result) => {
        this.mnemonic = result;
      });
  },
};
</script>

<style scoped>
.hello {
  max-width: 500px;
  overflow-wrap: break-word;
  margin: 0 auto;
  text-align: left;
  padding: 0 0.5rem;
  border: 1px solid #2c3e50;
  border-radius: 0.25rem;
}
</style>