내 Nuxt 애플리케이션에서 `navigator`, `window` 및 `document`가 정의되지 않은 이유는 무엇입니까?

Nuxt 애플리케이션에서 정의되지 않은 탐색기/창/문서를 처리하는 방법

소개

In 네비게이터, 창 및 문서와 같은 전역 브라우저 변수에 액세스하는 Nuxt 애플리케이션은 때때로 결과를 초래할 수 있습니다. 정의되지 않은 오류가 발생했습니다. 이는 Nuxt 프레임워크가 클라이언트에서 렌더링되기 전에 코드가 처음에 서버에서 실행되는 서버 측 렌더링(SSR)을 활용하기 때문입니다.

솔루션

이 문제를 해결하는 핵심은 브라우저 종속 코드를 클라이언트 측으로 제한하는 것입니다. 이를 달성하기 위한 몇 가지 전략이 있습니다:

1. 조건부 코드 래핑

클라이언트 측에서만 코드를 실행하려면 if(process.client) 조건으로 코드를 래핑하세요. 이렇게 하면 SSR 단계 이후에만 코드가 실행됩니다.

<script>
  export default {
    mounted() {
      if (process.client) {
        // Your JS code here
      }
    },
  }
</script>

2. <클라이언트 전용> 구성요소

<클라이언트 전용> 클라이언트에서만 렌더링되어야 하는 요소를 래핑하는 구성 요소입니다. 이는 SSR 중에 실행되는 것을 방지합니다.

<template>
  <div>
    <client-only>
      <p>This will only be rendered on client</p>
    </client-only>
  </div>
</template>

3. 동적 가져오기

라이브러리가 SSR을 지원하지 않는 경우 동적 가져오기를 사용할 수 있습니다. 이렇게 하면 클라이언트 측에서 필요할 때까지 라이브러리 로드가 지연되어 SSR 중에 라이브러리가 실행되지 않습니다.

export default {
  components: {
    [process.client &&& 'VueEditor']: () => import('vue2-editor'),
  },
}

참고:

• 래핑 실행이 아닌 렌더링을 건너뜁니다.
• 일부 패키지는 SSR과 제대로 작동하려면 추가 구성이 필요할 수 있습니다.

위 내용은 내 Nuxt 애플리케이션에서 `navigator`, `window` 및 `document`가 정의되지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!