Reactjs에 대한 vite 오류 수정 - 전역이 정의되지 않았고 프로세스가 정의되지 않았습니다.

프로젝트에 대한 Reactjs 템플릿을 사용하여 vite 앱을 실행하고 .env 파일에서 환경 변수를 가져오려고 하는 시나리오에서. .env에서 환경 변수를 가져오는 일반적인 방법은 다음과 같이 변수에 대해 process.env.SOMETHING을 사용하는 것입니다.

SOMETHING=SECRETSAUCE

이 시점에서 vite.config.ts는 다음과 같습니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

그러나 vite에서는 변수 가져오기가 바로 작동하지 않으며, 문제를 해결할 수 있는 방법이 많이 있습니다. 대부분 시도해 보았는데 단순하고 직선적인 방식을 고수하는 느낌이 들었습니다.

아마도 위의 정의와 process.env.*의 기본 가져오기 논리를 사용하면 Uncaught ReferenceError: global is not Define 오류가 발생했을 것입니다.

Stackoverflow에서 많은 참조를 발견하고 혼란스러워집니다.

오류에 대한 수정은 아래와 같이 config에 global을 정의하는 것입니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

이제 이는 또 다른 일반적인 오류 Uncaught ReferenceError: 프로세스가 정의되지 않음으로 이어질 수 있습니다.

다시 말하지만, 웹에는 많은 솔루션이 있으며 일부는 오래되었습니다. 가장 관련성이 높고 구현하기 쉬운 방법은 vite 라이브러리에서 loadEnv를 가져오고 아래와 같이 사용자 정의 로직을 구축하는 것입니다.

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      global: {},
      'process.env': env
    },
    plugins: [react()],
  }
})

그리고 마법은 바로 일어난다 !!

또한 언급하자면, process.env.*가 있는 코드에서 환경 변수 가져오기는 dotenv 종속성이 없어도 잘 작동하므로 dotenv 종속성을 사용할 필요가 없습니다.

즐거운 코딩하세요!

위 내용은 Reactjs에 대한 vite 오류 수정 - 전역이 정의되지 않았고 프로세스가 정의되지 않았습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!