基础网页运行时出现Uncaught ReferenceError：particlesJS未定义问题

嘿，这个错误我见得挺多的，大概率是几个小问题导致的，咱们一步步来排查解决：

1. 先修复script标签的低级拼写错误 #

你的代码里有个很容易忽略的笔误：<script scr="...">里的scr应该是src！浏览器识别不了scr这个属性，自然不会加载particles.js库，结果就是调用particlesJS函数时找不到它。

修正后的标签应该是：

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

2. 确保初始化代码在库加载之后 #

如果你的particles.js文件是用来初始化粒子效果的（里面有调用particlesJS()的代码），一定要把它放在加载particles.js库的script标签之后。比如：

<!-- 先加载核心库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- 再加载你的初始化脚本 -->
<script src="particles.js"></script>

要是反过来，库还没加载完成就调用函数，肯定会报未定义错误。

3. 检查文件路径与CDN有效性 #

• 如果你是用本地的particles.min.js文件，确认它确实和index.html在同一文件夹下，文件名完全匹配（注意大小写，比如Linux/macOS下Particles.min.js和particles.min.js是两个不同的文件）。
• 如果用CDN链接，确保链接没有失效，你可以直接把链接复制到浏览器地址栏，看看能不能正常下载文件。

完整的正确示例代码 #

给你一个能正常运行的基础结构参考：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="particles-js"></div>
    
    <!-- 加载particles.js核心库 -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <!-- 加载自定义初始化脚本 -->
    <script src="particles.js"></script>
</body>
</html>

最后别忘了打开Chrome开发者工具的「网络」面板，看看有没有404错误——如果有，说明某个文件的路径不对，得调整一下。

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