Vue3使用vue3-particles报错n.component is not a function求助

问题描述 #

按照vue3-particles官方教程实现粒子效果时，控制台出现“n.component is not a function”的渲染错误。

项目依赖信息 #

"ts-node": "^10.9.1",
"tsparticles": "^2.8.0",
"typescript": "^4.9.4",
"vite": "^4.0.3",
"vue": "^3.2.33",
"vue-i18n": "^9.2.2",
"vue3-particles": "^2.8.0",
"yarn": "^1.22.19"

原组件代码 #

Script 部分 #

<script setup>
import styles from "./MagicParticles.module.scss";
import Particles from "vue3-particles";
import { loadFull } from "tsparticles";
const particlesInit = async (engine) => {
  await loadFull(engine);
};

const particlesLoaded = async (container) => {
  console.log("Particles container loaded", container);
};

const defaultParams = {
  background: {
    color: {
      value: "#0d47a1",
    },
  },
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: "push",
      },
      onHover: {
        enable: true,
        mode: "repulse",
      },
      resize: true,
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40,
      },
      push: {
        quantity: 4,
      },
      repulse: {
        distance: 200,
        duration: 0.4,
      },
    },
  },
  particles: {
    color: {
      value: "#ffffff",
    },
    links: {
      color: "#ffffff",
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1,
    },
    collisions: {
      enable: true,
    },
    move: {
      direction: "none",
      enable: true,
      outMode: "bounce",
      random: false,
      speed: 6,
      straight: false,
    },
    number: {
      density: {
        enable: true,
        area: 800,
      },
      value: 80,
    },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: "circle",
    },
    size: {
      random: true,
      value: 5,
    },
  },
  detectRetina: true,
};
</script>

Template 部分 #

<template>
  <div :class="styles.particlesBox">
    <Particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      url="http://foo.bar/particles.json"
    />

    <Particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="defaultParams"
    />
  </div>
</template>

错误原因及修复方案 #

1. 组件导入方式错误 #

vue3-particles v2版本的默认导出并非Particles组件，需使用命名导入：

// 替换原导入语句
import { Particles } from "vue3-particles";

2. 重复ID导致DOM冲突 #

模板中两个Particles组件使用了相同的id="tsparticles"，需修改为唯一ID：

<Particles
  id="tsparticles-1"
  :particlesInit="particlesInit"
  :particlesLoaded="particlesLoaded"
  url="http://foo.bar/particles.json"
/>

<Particles
  id="tsparticles-2"
  :particlesInit="particlesInit"
  :particlesLoaded="particlesLoaded"
  :options="defaultParams"
/>

3. 可选优化：按需加载粒子引擎 #

若无需全部粒子功能，可使用loadSlim替代loadFull以减少打包体积：

import { loadSlim } from "tsparticles";

const particlesInit = async (engine) => {
  await loadSlim(engine);
};

内容的提问来源于stack exchange，提问作者Dariusz Szymczak