Vue3/Vite: Module externalisieren

Question

Ich versuche, einen String mit crypto in einer Vue 3-Anwendung zu hashen.

asynchroner Funktions-Hash (Token) {
    const data = new TextEncoder().encode(token)
    const byteHash = waiting crypto.subtle.digest("SHA-256", Daten)
    // ^ Der folgende Fehler wird hier ausgegeben

    const arrayHash = Array.from(new Uint8Array(byteHash))
    const hexHash = arrayHash.map(b => b.toString(16).padStart(2, '0')).join('').toLocaleUpperCase()

    hexHash zurückgeben
}

Soweit ich weiß, ist crypto jetzt in Browsern verfügbar, daher besteht keine Notwendigkeit, stattdessen browserify zu verwenden.

In meiner Browserkonsole ist jedoch der folgende Fehler aufgetreten:

Fehler: Das Modul „crypto“ wurde aus Gründen der Browserkompatibilität nicht aufgerufen.

Ich verstehe diesen Fehler als „Vite ist so konfiguriert, dass es das crypto-Modul während des Build-Prozesses externalisiert.“ Aber ich finde eine solche Einstellung nicht in meinem vite.config.js:

// Plugins:
vue aus „@vitejs/plugin-vue“ importieren
Vuetify aus „vite-plugin-vuetify“ importieren

// Dienstprogramme:
importiere { defineConfig } aus 'vite'
importiere { fileURLToPath, URL } aus 'node:url'

// https://vitejs.dev/config/
Standard exportieren defineConfig({
  Plugins: [
    vue(),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport: true
    })
  ],
  define: { 'process.env': {} },
  lösen: {
    alias: {
      '@': fileURLToPath(neue URL('./src', import.meta.url))
    },
    Erweiterungen: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue']
  },
  Server: {
    Hafen: 3000
  },
  prüfen: {
    setupFiles: ['../vuetify.config.js'],
    abhängig: {
      inline: ['vuetify']
    },
    Globals: wahr
  }
})

Gibt es „integrierte“ Vite-Standardeinstellungen, die dieses Problem verursachen könnten? Ist dieses Problem woanders konfiguriert? Wie kann ich dieses Problem lösen und das Modul crypto

Answer 1

问题在于NodeJS和浏览器都有一个名为crypto的模块（实现了webcrypto标准），它们是兼容的，但需要以不同的方式访问，因为在浏览器中它是由不存在于NodeJS中的window上下文提供的。

如果您直接在浏览器中工作，您不会看到区别，因为window是默认上下文。

但是Vite是在NodeJS上下文中工作的，它（正确地）认为在浏览器中这个模块不可用作crypto，因此会抛出错误。它不知道/不关心这个模块在浏览器中也存在，但是作为window.crypto。

也许可以在vite.config.js中进行配置，但我对此不太熟悉。

我想到了以下解决方案，它在两个环境中都有效：

function getCrypto() {
  try {
    return window.crypto;
  } catch {
    return crypto;
  }
}

async function hash(token) {
  const compatibleCrypto = getCrypto();

  const data = new TextEncoder().encode(token);
  const byteHash = await compatibleCrypto.subtle.digest('SHA-256', data);

  const arrayHash = Array.from(new Uint8Array(byteHash));
  const hexHash = arrayHash
    .map(b => b.toString(16).padStart(2, '0'))
    .join('')
    .toLocaleUpperCase();

  return hexHash;
}

现在这个函数在两个环境中都可以工作。