Vue3/Vite: Mengeksternalkan modul

Question

Saya cuba mencincang rentetan menggunakan crypto

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
}

Setahu saya, crypto kini tersedia dalam penyemak imbas, jadi tidak perlu menggunakan browserify 
Walau bagaimanapun, saya mengalami ralat berikut dalam konsol penyemak imbas saya: 
Ralat: Modul "crypto" tidak dapat mengakses "crypto.subtle"

Saya memahami ralat ini sebagai "Vite dikonfigurasikan untuk menyahaktifkan crypto modul semasa proses binaan." Tetapi saya tidak menemui tetapan sedemikian dalam vite.config.js: 
// 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
  }
})

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 crypto 

Answer 1

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