Rumah  >  Soal Jawab  >  teks badan

Vue3/Vite: Mengeksternalkan modul

<p>Saya cuba mencincang rentetan menggunakan <kod>crypto</code> </p> <pre class="brush:js;toolbar:false;">async function hash (token) { data const = TextEncoder().encode(token) baharu const byteHash = menunggu crypto.subtle.digest("SHA-256", data) // ^ ralat di bawah dibuang di sini const arrayHash = Array.from(Uint8Array(byteHash)) const hexHash = arrayHash.map(b => b.toString(16).padStart(2, '0')).join('').toLocaleUpperCase() kembalikan hexHash } </pra> <p>Setahu saya, <code>crypto</code> kini tersedia dalam penyemak imbas, jadi tidak perlu menggunakan <code>browserify</code> </p> <p>Walau bagaimanapun, saya mengalami ralat berikut dalam konsol penyemak imbas saya: </p> <pre class="brush:js;toolbar:false;">Ralat: Modul "crypto" tidak dapat mengakses "crypto.subtle" </pra> <p>Saya memahami ralat ini sebagai "Vite dikonfigurasikan untuk menyahaktifkan <kod>crypto</code> modul semasa proses binaan." Tetapi saya tidak menemui tetapan sedemikian dalam <code>vite.config.js</code>: </p> <pre class="brush:js;toolbar:false;">// Pemalam: import vue daripada '@vitejs/plugin-vue' import vuetify daripada 'vite-plugin-vuetify' // Utiliti: import { defineConfig } daripada 'vite' import { fileURLToPath, URL } daripada 'node:url' // https://vitejs.dev/config/ eksport defineConfig lalai ({ pemalam: [ vue(), // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin vuetify({ autoImport: benar }) ], takrifkan: { 'process.env': {} }, selesaikan: { alias: { '@': fileURLToPath(URL baharu('./src', import.meta.url)) }, sambungan: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'] }, pelayan: { pelabuhan: 3000 }, ujian: { setupFiles: ['../vuetify.config.js'], deps: { sebaris: ['vuetify'] }, globals: benar } }) </pra> <p>Adakah terdapat sebarang tetapan lalai Vite "terbina dalam" yang boleh menyebabkan isu ini? Adakah isu ini dikonfigurasikan di tempat lain? Bagaimanakah saya boleh menyelesaikan masalah ini dan menggunakan modul <code>crypto</code> </p>
P粉107991030P粉107991030441 hari yang lalu692

membalas semua(1)saya akan balas

  • P粉019353247

    P粉0193532472023-08-27 11:31:26

    Masalahnya ialah NodeJS dan pelayar kedua-duanya mempunyai modul yang dipanggil crypto (yang melaksanakan standard crypto的模块(实现了webcrypto标准),它们是兼容的,但需要以不同的方式访问,因为在浏览器中它是由不存在于NodeJS中的windowwebcrypto

    ) dan ia serasi tetapi perlu diakses dengan cara yang berbeza kerana dalam penyemak imbas Ia adalah disediakan oleh konteks

    yang tidak wujud dalam NodeJS. window

    Jika anda bekerja secara langsung dalam penyemak imbas, anda tidak akan melihat perbezaannya kerana

    ialah konteks lalai. crypto,因此会抛出错误。它不知道/不关心这个模块在浏览器中也存在,但是作为window.crypto

    Tetapi Vite berfungsi dalam konteks NodeJS dan ia (dengan betul) percaya bahawa modul ini tidak tersedia

    dalam penyemak imbas. vite.config.js

    Mungkin ia boleh dikonfigurasikan dalam

    , tetapi saya tidak begitu biasa dengannya.

    Saya menghasilkan penyelesaian berikut, yang berfungsi dalam kedua-dua persekitaran:

    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;
    }
    
    🎜Kini fungsi ini berfungsi dalam kedua-dua persekitaran. 🎜

    balas
    0
  • Batalbalas