public目录下HTML引用src目录JS文件失效，是什么原因？

• 静态服务根目录限制：绝大多数前端项目的本地开发服务、线上静态托管服务都会默认将public文件夹设为资源服务的根目录，也就是说浏览器仅允许访问public文件夹内部的资源，无法访问根目录外层的src文件夹，你写的../src/index.js相当于尝试跳出服务根目录，会直接返回404错误。
• 本地file协议限制：如果是直接双击打开index.html用file协议预览，本地文件系统的权限限制、路径计算偏差、跨域规则都会阻止JS文件加载，即使路径写对也大概率无法正常引入。
• 构建工具规则限制：如果你的项目用了Vite、Webpack这类构建工具，src目录下的文件需要经过编译打包后才会被输出到最终的静态资源目录，你直接引入src下的源文件，构建工具不会处理该路径，浏览器也无法拿到可执行的JS资源。
• 文件名大小写不匹配：部分操作系统（如Linux、MacOS）对文件名大小写敏感，如果路径拼写的大小写和实际文件名不一致，也会导致加载失败。

• 若使用现成项目脚手架，按照规范在项目入口JS（src/index.js）中通过import引入依赖即可，无需手动在HTML中添加script标签；如果确实需要手动引入外置JS，可把JS文件放到public目录下，引入路径写/index.js即可。
• 若为自行搭建的静态服务，可将服务根目录调整为整个project文件夹，不过该方式会直接暴露src下的源码，不推荐生产环境使用。
• 检查路径拼写的大小写和实际文件是否完全一致。

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