Vue3/Vite: 모듈 외부화

Question

Vue 3 애플리케이션에서 crypto를 사용하여 문자열을 해시하려고 합니다.

비동기 함수 해시(토큰) {
    const 데이터 = 새로운 TextEncoder().encode(토큰)
    const byteHash = crypto.subtle.digest("SHA-256", 데이터)를 기다립니다.
    // ^ 아래 오류가 여기에 발생합니다.

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

    hexHash 반환
}

제가 아는 한, 이제 브라우저에서 crypto를 사용할 수 있으므로 대신 browserify를 사용할 필요가 없습니다.

그러나 브라우저 콘솔에서 다음 오류가 발생했습니다.

오류: 브라우저 호환성을 위해 "crypto" 모듈이 외부화되었습니다. 클라이언트 코드에서 "crypto.subtle"에 액세스할 수 없습니다.

저는 이 오류를 "Vite가 빌드 프로세스 중에 crypto 모듈을 외부화하도록 구성되었습니다."라고 이해합니다. 하지만 내 vite.config.js:

에서 그러한 설정을 찾을 수 없습니다.

// 플러그인:
'@vitejs/plugin-vue'에서 vue 가져오기
'vite-plugin-vuetify'에서 vuetify 가져오기

// 유틸리티:
'vite'에서 { 정의 구성 } 가져오기
'node:url'에서 { fileURLToPath, URL } 가져오기

// https://vitejs.dev/config/
기본 정의 구성 내보내기({
  플러그인: [
    뷰(),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      자동 가져오기: 사실
    })
  ],
  정의: { 'process.env': {} },
  해결하다: {
    별칭: {
      '@': fileURLToPath(새 URL('./src', import.meta.url))
    },
    확장자: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue']
  },
  서버: {
    포트: 3000
  },
  시험: {
    setupFiles: ['../vuetify.config.js'],
    뎁스: {
      인라인: ['vuetify']
    },
    전역 : 사실
  }
})

이 문제를 일으킬 수 있는 "내장" Vite 기본 설정이 있습니까? 이 문제가 다른 곳에서 구성되었습니까? 이 문제를 해결하고 내 애플리케이션에서 crypto를 사용하려면 어떻게 해야 합니까?

Answer 1

문제는 NodeJS와 브라우저 둘 다 crypto(crypto的模块（实现了webcrypto标准），它们是兼容的，但需要以不同的方式访问，因为在浏览器中它是由不存在于NodeJS中的windowwebcrypto

표준 구현)라는 모듈이 있고 호환되지만 브라우저에서는 다른 방식으로 액세스해야 한다는 것입니다. NodeJS에 존재하지 않는

컨텍스트에서 제공됩니다. window

브라우저에서 직접 작업하는 경우

가 기본 컨텍스트이므로 차이를 볼 수 없습니다. crypto，因此会抛出错误。它不知道/不关心这个模块在浏览器中也存在，但是作为window.crypto

그러나 Vite는 NodeJS의 맥락에서 작동하며 이 모듈을 브라우저에서

사용할 수 없다고 (올바르게) 믿습니다. vite.config.js

아마도

에서 구성할 수 있을 것 같은데, 저는 그다지 익숙하지 않습니다.

저는 두 환경 모두에서 작동하는 다음 솔루션을 생각해냈습니다.

으아악 으아악 🎜이제 이 기능은 두 환경 모두에서 작동합니다. 🎜