我正在嘗試在Vue 3應用程式中使用crypto
對字串進行雜湊。
async function hash (token) { const data = new TextEncoder().encode(token) const byteHash = await crypto.subtle.digest("SHA-256", data) // ^ the below error is thrown here const arrayHash = Array.from(new Uint8Array(byteHash)) const hexHash = arrayHash.map(b => b.toString(16).padStart(2, '0')).join('').toLocaleUpperCase() return hexHash }
據我了解,現在瀏覽器中可以使用crypto
,所以不需要使用browserify
替代。
然而,我在瀏覽器控制台中遇到了以下錯誤:
Error: Module "crypto" has been externalized for browser compatibility. Cannot access "crypto.subtle" in client code.
我理解這個錯誤為「Vite在建置過程中配置了將crypto
模組外部化」。但是我在我的vite.config.js
中沒有找到這樣的設定:
// Plugins: import vue from '@vitejs/plugin-vue' import vuetify from 'vite-plugin-vuetify' // Utilies: import { defineConfig } from 'vite' import { fileURLToPath, URL } 從 'node:url' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin vuetify({ autoImport: true }) ], define: { 'process.env': {} }, resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'] }, server: { port: 3000 }, test: { setupFiles: ['../vuetify.config.js'], deps: { inline: ['vuetify'] }, globals: true } })
是否有任何「內建」的Vite預設設定會導致這個問題?這個問題是否在其他地方進行了配置?我該如何解決這個問題並在我的應用程式中使用crypto
模組?
問題在於NodeJS和瀏覽器都有一個名為
crypto
的模組(實現了webcrypto標準),它們是相容的,但需要以不同的方式訪問,因為在瀏覽器中它是由不存在於NodeJS中的window
上下文提供的。如果您直接在瀏覽器中工作,您不會看到區別,因為
window
是預設上下文。但是Vite是在NodeJS上下文中工作的,它(正確地)認為在瀏覽器中這個模組不可用作
crypto
,因此會拋出錯誤。它不知道/不關心這個模組在瀏覽器中也存在,但是作為window.crypto
。也許可以在
vite.config.js
中進行配置,但我對此不太熟悉。我想到了以下解決方案,它在兩個環境中都有效:
現在這個函數在兩個環境中都可以工作。