Nuxt.js에서 "문서가 정의되지 않았습니다"

Question

Choices.js을 Vue 구성 요소 내에서 사용하려고합니다. 구성 요소가 성공적으로 컴파일하지만 다음 오류가 트리거됩니다 : 브라우저에서

[vue-router] Failed to resolve async component default: ReferenceError: document is not defined

을 내가 볼 :

ReferenceError document is not defined

내가이 Nuxt.js의 SSR 함께 할 수있는 뭔가가 생각? Choices.js가 클라이언트에서 실행 되기만하면됩니다. 왜냐하면 클라이언트 측에서만 생각하기 때문입니다.

nuxt.config.js

build: { 
    vendor: ['choices.js'] 
} 

AppCountrySelect.vue 고전 뷰에서

<script> 
import Choices from 'choices.js' 

export default { 
    name: 'CountrySelect', 
    created() { 
    console.log(this.$refs, Choices) 
    const choices = new Choices(this.$refs.select) 
    console.log(choices) 
    } 
} 
</script> 

이 잘 작동 것, 그래서 아주 많이 여전히와 그립에지고있어 이런 식으로 Nuxt.js를 어떻게 사용할 수 있습니까?

내가 잘못 가고있는 모든 아이디어가 있습니까?

감사합니다.

Answer 1

당신이 Nuxt 프로젝트 ;-)

Choices.js lib 디렉토리는 클라이언트 측 사용할 수 있습니다를 시작할 때 그것은 일반적인 오류입니다! 그래서 Nuxt는 서버 측에서 렌더러를 만들려고했으나 Node.js window.document에서 오류가 발생했습니다.
nb : window.document은 브라우저 렌더러에서만 사용할 수 있습니다.

Nuxt 1.0.0 RC7부터 <no-ssr> 요소를 사용하면 클라이언트 측 구성 요소 만 허용 할 수 있습니다. 이것에 대한 https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue