将jQuery编写的外部.js格式JavaScript文件部署到Xampp无法读取如何解决

• 第一步：确认访问方式是否正确
  禁止直接双击HTML文件打开，必须在浏览器地址栏输入http://localhost/[你项目在htdocs下的路径]/xxx.html访问，file://协议打开的页面会存在大量JS限制，哪怕XAMPP服务正常也无法正确加载资源。
• 第二步：验证JS文件可访问性
  直接在浏览器地址栏输入你的JS文件完整URL，比如项目放在htdocs的myProject文件夹，JS文件名为main.js，就输入http://localhost/myProject/main.js，如果返回404：
  • 检查Windows资源管理器是否开启了「显示文件扩展名」，确认你的JS文件后缀是.js而不是误存为.js.txt
  • 确认JS文件确实放在对应项目目录下，不要放在htdocs之外的路径
• 第三步：检查script标签写法
  确保script标签的src属性写的是网络路径而非本地磁盘路径，错误示例：<script src="C://xampp/htdocs/myProject/main.js"></script>，正确示例：<script src="./main.js"></script>，同时注意引入顺序：必须先引入jQuery库，再引入你自己写的jQuery业务代码，否则会出现$ is not defined报错导致代码不执行。
• 第四步：排查XAMPP MIME配置异常
  打开XAMPP安装目录下的apache/conf/mime.types文件，查找是否存在application/javascript js的配置项，如果不存在或者配置为text/plain之类的异常值，新增/修正为正确配置后重启Apache服务即可。
• 第五步：查看浏览器控制台报错
  按F12打开浏览器开发者工具，切换到「Console」标签，根据报错内容精准定位问题：
  • 404报错：资源路径错误，回到第二步排查
  • MIME type不匹配：回到第四步修正Apache配置
  • $ is not defined：jQuery未引入或引入顺序晚于业务代码

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