类型错误：crypto.createCipheriv 不是函数

Question

vite+vue3 使用 aes-cross 报： TypeError: crypto.createCipheriv is not a function Version: "vue": "^3.2.23", "vite": "^2.6.4", "aes-cross": " ^1.0.9",

Answer 1

要crypto在浏览器中工作，请按照以下说明操作

\n

\n
1. 添加依赖项
\n

\n

yarn add stream-browserify browserify-zlib events process util buffer

\n

\n
2. 配置vite.config.js
\n

\n

import { defineConfig } from \'vite\'\nimport vue from \'@vitejs/plugin-vue\'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [vue()],\n  resolve: {\n    alias: {\n      process: "process/browser",\n      stream: "stream-browserify",\n      zlib: "browserify-zlib",\n      util: \'util\'\n    }\n  }\n})\n\n

\n

\n
3. 添加JS到index.html
\n

\n

<!-- [...] -->\n<div id="root"></div>\n\n<!-- node // crypto -->\n<script>window.global = window;</script>\n<script type="module">\n    import { Buffer } from "buffer/"; // <-- no typo here ("/")\n    import process from "process";\n    import EventEmitter from "events";\n        \n    window.Buffer = Buffer;\n    window.process = process;\n    window.EventEmitter = EventEmitter;\n</script>\n<!-- [...] -->\n

\n

\n
4. 添加导入App.vue和测试功能
\n

\n

在App.vue：

\n

import crypto from \'crypto-browserify\'\nimport { Buffer } from \'buffer/\' // <-- no typo here ("/")\n\n// test crypto \nfunction crypt() {\n  // Node.js program to demonstrate the    \n  // crypto.createCipheriv() method\n  \n  const iv = crypto.randomBytes(16);\n  const key = crypto.pbkdf2Sync("foobar", "salt", 1000, 32, \'sha512\');\n  const cipher = crypto.createCipheriv(\'aes-256-gcm\', key, iv);\n  var text = crypto.randomBytes(200)\n  var ourCipherText = Buffer.concat([cipher.update(text), cipher.final()])\n  console.log("ciphered text:", ourCipherText.toString(\'hex\'))\n\n  return ourCipherText.toString(\'hex\');\n}\n\n[...]\n

\n

结果\xe2\x9c\x85

\n

\n