Vue3/Vite: 모듈 외부화
<p>Vue 3 애플리케이션에서 <code>crypto</code>를 사용하여 문자열을 해시하려고 합니다. </p>
<pre class="brush:js;toolbar:false;">비동기 함수 해시(토큰) {
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 반환
}
</pre>
<p>제가 아는 한, 이제 브라우저에서 <code>crypto</code>를 사용할 수 있으므로 대신 <code>browserify</code>를 사용할 필요가 없습니다. </p>
<p>그러나 브라우저 콘솔에서 다음 오류가 발생했습니다. </p>
<pre class="brush:js;toolbar:false;">오류: 브라우저 호환성을 위해 "crypto" 모듈이 외부화되었습니다. 클라이언트 코드에서 "crypto.subtle"에 액세스할 수 없습니다.
</pre>
<p>저는 이 오류를 "Vite가 빌드 프로세스 중에 <code>crypto</code> 모듈을 외부화하도록 구성되었습니다."라고 이해합니다. 하지만 내 <code>vite.config.js</code>:</p>에서 그러한 설정을 찾을 수 없습니다.
<pre class="brush:js;toolbar:false;">// 플러그인:
'@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']
},
전역 : 사실
}
})
</pre>
<p>이 문제를 일으킬 수 있는 "내장" Vite 기본 설정이 있습니까? 이 문제가 다른 곳에서 구성되었습니까? 이 문제를 해결하고 내 애플리케이션에서 <code>crypto</code>를 사용하려면 어떻게 해야 합니까? </p>
