Nuxt에서 네비게이터/창/문서 정의되지 않은 메소드 수정

Question

Nuxt 애플리케이션 내에서 UserAgent 및 Retina 정보를 확인하려고 합니다. 그러나 응용 프로그램에서 오류가 발생하고 탐색/창이 정의되지 않았다는 메시지가 표시됩니다. Nuxt 애플리케이션에서 이 정보를 어떻게 얻나요?

으아아아

const userAgent = navigator.userAgent.toLowerCase()
const isAndroid = userAgent.includes('android')

Answer 1

해결 방법은 다음과 같습니다.

• navigator 未定义
• window 未定义
• 文档未定义

---

논리적 JS 코드를 래핑하는 방법에 대한 예입니다

으아악

다음과 같습니다: https://nuxtjs.org/docs/2. x/internals-용어집/컨텍스트

PS: mounted + process.client 有点多余，因为 mounted 클라이언트에서만 실행됩니다.

---

또한 구성 요소가 클라이언트 측에서만 렌더링되도록 하려면 구성 요소를 <client-only>로 래핑하는 것도 좋은 생각입니다.

으아악

이 문서에 대한 문서는 https://nuxtjs.org/docs/2.x/features/nuxt-comComponents/#the-client-only-comComponent

에 있습니다.

PS: client-only여기에 설명된 대로 이 태그는 렌더링만 건너뛰고 실행은 건너뛰기 때문에 주의하세요.

---

일부 패키지는 가져오기 시 SSR을 지원하지 않습니다. 이를 위해 다음을 수행할 수 있습니다.

• 동적 가져오기의 조건 사용(나중에 라이브러리를 사용하려는 경우)
• 바로 이렇게 (vue-editor 같은 컴포넌트를 로드하고 싶다면)

으아악