nuxt.js 使用vue-wordCloud词云图的问题及解决办法

vue-wordCloud的使用

直接推荐官方文档，超级详细

• word-cloud-npm文档
• word-cloud-github文档

报错项目

nuxt中vue-cloudCloud按照官网的使用步骤，正确的部署程序之后，提示以下错误，提示Window没有定义。

window is not defined

这是因为nuxt.js是服务端的渲染程序，而Window是本地对象，是浏览器使用的，所以不能通过服务器渲染使用。可以使用以下方式解决。

解决步骤

正确按照vue-wordCloud之后，把它注册为plugin，具体操作如下：

第一步

在plugin目录下，新建word-cloud.js插件

然后注入以下内容：

import Vue from 'vue'
import wordcloud from 'vue-wordcloud'
Vue.component('wordcloud', wordcloud)

第二步

在nuxt.config.js修改配置

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    {
      src:'@/plugins/element-ui',
      ssr:true
    },
    {
      src:'@/plugins/word-cloud',
      ssr:false
    },
  ],

注意：

最开始的plugins配置不是这样的，而是：

plugins: [
    @/plugins/element-ui
],

这样默认ssr:true

srr:true的意思是，是否在服务器端渲染。

第三步

删除原来注册的组件

  components:{
    wordcloud
  },

问题解决

持续更新。。。