Nuxt.js開發中碰到的問題（一）window 或 document is not defined

博客原文連接

前言

從這一期開始，我會逐漸將一些在開發博客系統是碰到的問題作一些總結，首先是Nuxt.js；

考慮到博客雖然主要作爲本身的筆記總結留存用，但也但願可以讓更多人可以看到，仍是決定上SEO優化；因爲詳情頁是動態的，沒法使用 prerender-spa-plugin 進行預渲染，因此最後仍是選了 Nuxt.js

---

window或document is not defined

碰到這種報錯，是因爲nuxt.js會在服務端渲染頁面，而服務端並無window或document

• 官方給出的解決方案以下：

官方解決方案連接

• 個人解決方案：

1. 寫一個返回頂部的vue組件

<!-- 利用setInterval實現一個返回頂部組件，速度step與組件出現滾動距離scroll可傳值 -->

<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>

複製代碼

2. 寫一個插件放入 plugins 文件夾中

/** * 將goTop組件掛載到全局 */

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

Vue.component('GoTop', GoTop)

複製代碼

3. 將插件寫入配置文件 nuxt.config.js

// 將插件寫進引入 nuxt.config.js，並將ssr選項設置爲false，這樣服務端渲染時就不會渲染這個組件了

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

複製代碼

4. 總結

至此， 一個簡單的返回頂部組件已經完成，通常碰到服務端沒法渲染的組件均可以這樣處理；

後續會添加 requestanimationframe 版本的返回頂部來提高效果， setInterval 版本就做爲兼容低版本瀏覽器使用