nuxt.js npm install 后不可用出现错误：document is not defined

1，出现原因： 

https://zh.nuxtjs.org/faq/window-document-undefined/ 

简单的说：是由于nuxt.js会在服务端渲染页面，而服务端并没有window或document。

我由于要在nuxt.js使用上传头像图片的插件，如下

github:https://github.com/dai-siki/vue-image-crop-upload

所以直接install后出现 document is not defined。

2，我的解决办法步骤：

1，首先下载插件：

nmp install vue-image-crop-upload

2，建一个js

在plugins目录下新建一个js文件，我的名称就image-crop-upload.js

3，js文件内容

image-crop-upload.js内容：将组件挂在全局

import Vue from 'vue'
import avatarUpload from 'vue-image-crop-upload/upload-2.vue';
Vue.component('avatar-upload',avatarUpload)

4，nuxt.config.js

将插件引入 nuxt.config.js并将ssr选项设置为false，这样服务端渲染时就不会渲染这个组件

5，使用方法：

1，简单，直接在.vue中使用，例：

<template>
  <div>
      <!--上传头像-->
      <div class="user-avatar">
        <avatar-upload field="file"
                       @crop-upload-success="cropUploadSuccess"
                       @crop-upload-fail="cropUploadFail"
                       v-model="showAvatar"
                       :width="300"
                       :height="300"
                       url="/image/avatar"
                       img-format="png"></avatar-upload>
      </div>
  </div>
</template>

注意：不用再 import avatarUpload from 'vue-image-crop-upload/upload-2.vue'导入和引用了。

2，也可以在components目录写一个.vue插件，然后在其他.vue页面通用。