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

vue-wordCloud的使用

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

报错项目

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

window is not defined

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

解决步骤

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

第一步

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

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

然后注入以下内容:

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

问题解决

持续更新。。。

如果觉得我的文章对你有用,请随意赞赏