nuxt中使用vue-particles的问题,部署服务器后报错'getElementsByClassName' of null

白大魔王
  • 48

之前是用vue做粒子特效,本地和部署都没有大问题。
为了网站搜索优化,特意用了nuxt,把代码搬移过来,做了很多修改,本地已经完美跑起来了。

nuxt部署有点复杂,这里不详细讲了。大概就是:第一步,服务器装好node环境,npm;第二,复制.nuxt、配置文件到指定目录;第三,安装vue-particles,npm install所有依赖,安装pm2;第四,用pm2守护nuxt服务。

于是做完,服务端也能跑起来,美中不足的是,其他页面完全正常,只有首页的粒子特效不显示,控制台报错如下:

image.png

TypeError: Cannot read property 'getElementsByClassName' of null
ffd2131.js:2

希望遇到过的大神指点迷津。

node版本是14.9.0,npm版本是6.14.8,node-sass是4.9.2,如下:
image.png

回复
阅读 258
3 个回答

image.png

看报错是找dom没找到。然后逻辑在particlesJS 里面,那么你是在什么钩子里面调用的呢?贴一下代码吧,盲猜是异步ajax回调中,然后你把调用提前了。所以说你滞后应该就可以了。

还没解决吗?刚看到邀请。
这个呢没用过。 应该是你数据结构问题 没能生成particles需要的数据结构去构建它的html;
语法?
结构?
字段key?
从这些排查排查。

我看了particleJS的源码,找到以下代码和getElementsByClassName相关的,

window.particlesJS = function(tag_id, params){

  //console.log(params);

  /* no string id? so it's object params, and set the id with default id */
  if(typeof(tag_id) != 'string'){
    params = tag_id;
    tag_id = 'particles-js';
  }

  /* no id? set the id to default id */
  if(!tag_id){
    tag_id = 'particles-js';
  }

  /* pJS elements */
  var pJS_tag = document.getElementById(tag_id),
      pJS_canvas_class = 'particles-js-canvas-el',
      exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);
   // ...
}

由此可以得知,大概率在初始化particlesJS时,你对应的tag_id的dom还没有被创建出来,你可以看下是否是SSR时,导致了particlesJS优先于DOM加载了

你知道吗?

宣传栏