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

Question

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

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

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

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

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

node版本是14.9.0，npm版本是6.14.8，node-sass是4.9.2，如下：

Answer 1

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

Answer 2

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

Answer 3

我看了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加载了