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

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

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

问题解决

持续更新。。。

版权声明:
作者:北忘山
文章:nuxt.js 使用vue-wordCloud词云图的问题及解决办法
链接:https://www.beiwangshan.com/archives/236.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>