在bip39中生成VueJS助记符，获取错误未定义的ReferenceError:全局

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>

Package.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

不过，我想说的是，我没那么容易试过这个模块。我认为它的设计是在服务器端运行，而不是像这样在浏览器中运行。如果您在生产中使用它，也可能需要考虑一些安全考虑，但这是另一个问题。

下面是我为演示用法而构建的https://5nlzy4.csb.app/ 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>