外部JS文件无法生效求助：内嵌脚本正常外部脚本失效

以下是针对你遇到问题的具体排查步骤：

• 验证脚本路径与加载状态
  打开浏览器开发者工具（F12）切换到Network标签，刷新页面后查看app.js的加载状态：

  • 如果显示404错误，说明路径不正确。根据HTML文件的位置调整路径：
    • 若HTML在根目录，/js/app.js是正确的绝对路径；
    • 若HTML在子目录（比如pages/下），需改为相对路径../js/app.js。

• 检查jQuery加载顺序
  确保app.js的script标签在jQuery的引入之后，示例：

  <!-- 先加载jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 再加载你的外部脚本 -->
  <script src="/js/app.js"></script>
  

  如果顺序颠倒，$(document).ready()会因jQuery未定义而报错。

• 查看控制台错误信息
  切换到Console标签，检查是否有如下类型的报错：

  • $ is not defined：jQuery未正确加载；
  • 语法错误（比如Unexpected token）：外部JS文件存在语法问题；
  • 元素找不到：选择器拼写错误或目标元素未在DOM中存在。

• 排除缓存干扰
  浏览器可能缓存了旧的脚本文件，按Ctrl+F5强制刷新页面，或者给script标签加版本参数强制更新：

  <script src="/js/app.js?v=20240520"></script>
  

• 确认脚本是否执行
  在app.js的$(document).ready()里添加测试代码：

  $(document).ready(function() {
      console.log("外部脚本已执行");
      // 你的原有业务代码
  });
  

  刷新页面后查看控制台是否有输出：若有则说明脚本已加载，问题出在后续业务代码（比如选择器错误）；若无则说明脚本未加载，回到路径或加载顺序排查。

• 检查JS文件语法与编码
  将外部JS代码复制回HTML内嵌测试，若正常运行，说明外部文件可能存在语法错误（比如括号不匹配、遗漏分号）或编码问题（比如UTF-8带BOM），建议用编辑器检查语法并保存为无BOM的UTF-8编码。

内容的提问来源于stack exchange，提问作者Mihael Dedić