通过文件夹打开网页没有js代码效果？开发者模式中Sources找不到js文件？

导引

今天在给别人展示自己写的网页时，通过以下方式（方式一）打开的时候，发现没有js的代码效果，当时就很尴尬（恨不得找个地洞钻进去😭😭）。但是将整个网页文件夹拖到VScode中（方式二），再打开的时候，js的代码效果还是完完整整的呈现在了面前（还是工具强大啊😊😆）

解决方案

思路

通过方式一打开网页时，js文件没有被浏览器找到，应该是js文件导入的代码有问题；
通过方式二打开网页时，js文件又可以被浏览器找到，又觉得不是js文件导入的代码问题。
问了一下博学多才的学长，他认为还是外部引入js文件的路径出错了。

HTML跟JS结构

这是我的html网页跟js文件的关系

错误引入方式

正确引入方式

相对路径

指以当前文件资源所在的目录为参照基础，连接到目标文件资源(或文件夹)的路径。

相对路径特殊符号

在表示相对路径时，单点表示当前目录，双点表示上一级目录，反斜杠 “/” 表示分割目录。

• 以"./"开头，表示当前目录和文件目录在同一个目录里(也可以省略不写)
• 以"…/"开头，表示目标文件在当前文件所在的上一级目录，向上走一级
• 以"…/…/"开头，表示目标文件在当前文件所在的上上一级目录，向上走两级
• 以"/"开头，表示根目录(文件系统的最上一级目录)

总结

可以看到，正确的引入方式跟错误的引入方式相差的只是一个 / ，也就是相对路径的问题，通过方式一打开的时候js的路径发生了变化。