Nuxt.js의 "문서가 정의되지 않음"

Nuxt.js의 "문서가 정의되지 않음"

Vue 구성 요소 내에서 Choice.js를 사용하려고 한다.구성 요소가 성공적으로 컴파일되지만 다음 오류가 트리거됨:

[vue-router] 비동기 구성 요소 기본값 확인 실패: ReferenceError: 문서가 정의되지 않음

브라우저에 표시되는 내용:

ReferenceError 문서가 정의되지 않음

이게 Nuxt.js의 SSR과 관련이 있다고 생각해?나는 오직 Choice.js만 클라이언트에서 실행하면 된다고 생각해.

nnxt.config.js

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

앱컨트리선택.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>

고전적인 Vue에서는 이것이 잘 먹힐 것이다. 그래서 나는 Nuxt.js를 어떻게 이런 식으로 일하게 할 수 있는지 아직도 이해가 간다.

내가 어디가 잘못됐는지 전혀 모르겠어?

고마워요.

Nuxt 프로젝트를 시작할 때 흔히 발생하는 오류 ;-)

Choices.js lib는 클라이언트 측에서만 사용할 수 있다!그래서 Nuxt는 서버측에서 렌더러를 시도했지만 Node.js에서 렌더러를 시도했다.window.document존재하지 않는다면, 당신은 실수를 하게 될 거야
nb:window.document브라우저 렌더러에서만 사용 가능.

Nuxt 1.0.0 RC7부터는<no-ssr>요소: 클라이언트 측에만 구성 요소를 허용하십시오.

<template>
  <div>
    <no-ssr placeholder="loading...">
      <your-component>
    </no-ssr>
  </div>
</template>

여기서 공식적인 예를 보자: https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue

---

업데이트:

Nuxt >= 2.9.0이기 때문에, 당신은 그것을 사용해야 한다.<client-only>대신의 요소<no-ssr>:

<template>
  <div>
    <client-only placeholder="loading...">
      <your-component>
    </client-only>
  </div>
</template>

자세한 내용은 nuxt 문서: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component를 참조하십시오.

합격된 답(맞으면서)은 너무 짧아서 제대로 이해하고 쓰기가 어려워서 좀 더 자세한 버전을 썼다.플롯.js +nux.js를 사용하는 방법을 찾고 있었지만, OP의 Choice.js +nuxt.js의 문제와 같아야 한다.

MyComponent.부에를 하다

<template>
  <div>
    <client-only>
      <my-chart></my-chart>
    </client-only>
  </div>
</template>
<script>
export default {
  components: {
    // this different (webpack) import did the trick together with <no-ssr>:
    'my-chart': () => import('@/components/MyChart.vue')
  }
}
</script>

MyChart.vue

<template>
  <div>
  </div>
</template>
<script>
import Plotly from 'plotly.js/dist/plotly'
export default {
  mounted () {
    // exists only on client:
    console.log(Plotly)
  },
  components: {
    Plotly
  }
}
</script>

업데이트: 있음<client-only>< 대신에 꼬리표를 달다<no-ssr>Nuxt v>>2.9.0에서 @Kaz의 코멘트를 참조하십시오.

플러그인으로 추가한 다음 SSR을 사용하지 않도록 설정하십시오.

문서와 창이 서버 측에 정의되어 있지 않기 때문이다.

nnxt.config.js는 아래와 같아야 한다.

plugins: [
{ src: '~/plugins/choices.js' } // both sides
{ src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
{ src: '~/plugins/server-only.js', mode: 'server' } // only on server side
],

나는 이제 no-ssr이 로 대체된다는 것을 알게 되었고, 나는 echart를 사용하고 있고 같은 문제를 가지고 있지만, 지금은 그것이 작동하고 있다!

    <client-only>
        <chart-component></chart-component>
    </client-only>

lightgallery.js 추가 모드: client'가 도움이 된 것 같다.

nnxt.config.js

 plugins: [
    { src: '~/plugins/lightgallery.js',  mode: 'client' }
  ],

플러그 인/라이트갤러리.js

import Vue from 'vue'
import lightGallery from 'lightgallery.js/dist/js/lightgallery.min.js'
import 'lightgallery.js/dist/css/lightgallery.min.css'

Vue.use(lightGallery)

이미지갤러리.부에를 하다

<template>
  <section class="image-gallery-container">
    <div class="image-gallery-row">
      <div
        ref="lightgallery"
        class="image-gallery"
      >
        <a
          v-for="image in group.images"
          :key="image.mediaItemUrl"
          :href="image.mediaItemUrl"
          class="image-gallery__link"
        >
          <img
            :src="image.sourceUrl"
            :alt="image.altText"
            class="image-gallery__image"
          >
        </a>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ImageGallery',
  props: {
    group: {
      type: Object,
      required: true
    }
  },
  mounted() {
    let vm = this;

    if (this.group && vm.$refs.lightgallery !== 'undefined') {
      window.lightGallery(this.$refs.lightgallery, {
        cssEasing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'
      });
    }
  }
}
</script>

<script>
import Choices from 'choices.js'

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

이게 도움이 될 것 같아, nuxt는 서버에 렌더링되고 윈도우가 정의된 후에 계산된 내부를 만질 거야.

이 실은 좀 오래된 것이지만, 누군가 유용하게 쓰일 수 있도록 해결책을 여기에 둘 것이다.

나는 비슷한 문제를 가지고 있었다.vue-star-rating그리고 최근에는 다른 플러그인도 거의 없다.

---

플러그인 이름, 가져오기/사용량 설정에 따라 아래 단계를 따르고 조정할 수 있다.

1. 플러그인 폴더로 이동하여 새 폴더 만들기js파일, 이 경우vue-star-rating.js, 그런 다음 플러그 인을 설정하도록 편집:

---

import Vue from 'vue'
import VueStarRating from 'vue-star-rating'

Vue.component('vue-star-rating', VueStarRating); //<--- the name you used to register the plugin will be the same to use when in the component (vue-star-rating)

2. 의 가곡으로 가십시오.nuxt.config.js파일 및 추가 플러그인:

---

  plugins: [{
      src: '~/plugins/vue-star-rating', // <--- file name
      mode: 'client'
    },
    //you can simply keep adding plugins like this:
    {
      src: '~/plugins/vue-slider-component',
      mode: 'client'
    }]

3. 이제 응용 프로그램의 어디서든 플러그인을 사용할 준비가 되셨습니다.그러나 그렇게 하려면 용기에 포장해야 한다. 예:

---

<client-only placeholder="loading...">
   <vue-star-rating />
</client-only>

---

주의:

구성 요소에 로컬로 가져올 필요는 없으며 위에서처럼 사용하면 문제가 해결된다.

1단계와 3단계 모두에서 플러그인의 이름을 동일하게 지정했는지 확인하십시오.이 경우일 것이다.vue-star-rating.

문서 개체를 계속 실행하려면 다음과 같이 하십시오.

const d = typeof document === 'undefined' ? null : document

참조URL: https://stackoverflow.com/questions/46058544/document-is-not-defined-in-nuxt-js