Nuxt.js開発で出会った問題(一)windowまたはdocument is not defined

ブログ

前言

この号から、私はだんだんいくつかのブログシステムを開発して出会った問題をいくつか総括して、まずNuxtです.js;
ブログは主に自分のノートのまとめとして残しておきますが、もっと多くの人に見てもらいたいので、SEOの最適化を決めたいと思います.詳細ページはダイナミックで、prerender-spa-pluginでプリレンダリングできないため、最後にNuxt.jsを選択しました.

Windowsまたはdocument is not defined

このような報告ミスに遭遇したのはnuxtのためだ.jsはサービス側でページをレンダリングしますが、サービス側にはwindowやdocumentはありません.

の公式ソリューションは、

です.

マイソリューション:

は、上部に戻るvueコンポーネント

を書く.

<template>
  <div id="go-top" v-if="isShow" @click="goTop" class="iconfont icon-arrowsupline">div>
template>

<script>
  export default {
    props: ['step', 'scroll'],
    data () {
      return {
        isShow: false
      }
    },
    created () {
      const $this = this

      window.onscroll = function () {
        if (document.documentElement.scrollTop + document.body.scrollTop > $this.scroll) {
          $this.isShow = true
        } else {
          $this.isShow = false
        }
      }
    },
    methods: {
      goTop () {
        const $this = this
        let timer = setInterval(function () {
          if (document.body.scrollTop) {
            document.body.scrollTop -= $this.step
            if (document.body.scrollTop <= 0) {
              document.body.scrollTop = 0
              clearInterval(timer)
            }
          } else {
            document.documentElement.scrollTop -= $this.step
            if (document.documentElement.scrollTop <= 0) {
              document.documentElement.scrollTop = 0
              clearInterval(timer)
            }
          }
        }, 23)
      }
    }
  }
script>

<style lang="less" scoped>
#go-top {
  position: fixed;
  bottom: 100px;
  right: 50px;
  cursor: pointer;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 2px solid #333;
  color: #333;
  font-size: 20px;
  border-radius: 5px;
  transition: all .5s;
  &:hover {
    border-radius: 50%;
    color: #fff;
    background: #333;
  }
}
style>

プラグインを書いてpluginsフォルダに

を入れます.

/**
*  goTop 
*/

import Vue from 'vue'
import GoTop from '~/components/GoTop'

Vue.component('GoTop', GoTop)

プラグインをプロファイルnuxt.config.js

に書き込む.

//   nuxt.config.js， ssr false， 

plugins: [
  {
    src: '~plugins/go-top',
    ssr: false
  }
]

まとめ

これで、上部コンポーネントの簡単な戻りが完了し、一般的にサービス側でレンダリングできないコンポーネントに遭遇してもこのように処理できます.
その後、requestanimationframeバージョンの戻りトップが追加され、効果が向上します.setIntervalバージョンは互換性の低いバージョンのブラウザとして使用されます.