Nuxt 애플리케이션에서 '네비게이터/창/문서가 정의되지 않았습니다' 오류가 발생하는 이유는 무엇입니까?

Nuxt에서 정의되지 않은 오류 탐색: "네비게이터/창/문서가 정의되지 않았습니다" 해결

Nuxt 애플리케이션에서 개발자는 시도할 때 종종 문제에 직면합니다. "네비게이터", "창" 또는 "문서"와 같은 특정 전역 변수에 액세스합니다. 이는 이러한 변수에 의존하는 JavaScript 코드를 실행할 때 발생할 수 있습니다.

이 문제를 해결하려면 Nuxt 애플리케이션이 HTML을 전송하기 전에 서버에서 생성하는 SSR(Server-Side Rendering)을 사용한다는 점을 이해하는 것이 중요합니다. 클라이언트. 전역 변수는 브라우저 환경에서만 사용할 수 있으므로 SSR 중에는 사용할 수 없습니다.

Nuxt 내에서 이러한 전역 변수에 액세스하려면 클라이언트 측 전용 접근 방식을 사용해야 합니다.

클라이언트측 로직을 "if (process.client) { ... }"로 래핑합니다:

래핑 "if (process.client)" 조건의 JS 코드입니다. 이렇게 하면 다음 전역 변수를 사용할 수 있는 클라이언트 측에서만 코드가 실행됩니다.

export default {
  mounted() {
    if (process.client) {
      console.log(navigator.userAgent);
    }
  },
};

"<client-only>"를 사용하세요:

클라이언트 측에서만 렌더링되어야 하는 구성 요소를 다음으로 래핑합니다. "<클라이언트 전용>":

<template>
  <div>
    <p>This will be rendered on both server and client.</p>
    
    <client-only>
      <p>This will only be rendered on client.</p>
    </client-only>
  </div>
</template>

SSR용 라이브러리를 동적으로 가져오기:

일부 라이브러리는 SSR을 지원하지 않을 수 있습니다. 이를 사용하려면 동적 가져오기를 사용하여 조건부로 가져옵니다.

export default {
  components: {
    [process.client && 'MyComponent']: () => import('./MyComponent.vue'),
  }
};

직접 가져오기:

클라이언트 측에서만 사용하도록 만들어진 구성 요소의 경우 다음과 같이 직접 가져올 수 있습니다.

export default {
  components: {
    'MyComponent': () => import('./MyComponent.vue'),
  }
};

이러한 접근 방식을 따르면 개발자는 다음과 같은 전역 변수에 성공적으로 액세스하고 조작할 수 있습니다. Nuxt 애플리케이션 내의 "navigator", "window" 및 "document".

위 내용은 Nuxt 애플리케이션에서 '네비게이터/창/문서가 정의되지 않았습니다' 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!