前言：我也遇到过这种情况

你在本地直接打开index.html， 浏览器一闪两闪，JS、CSS根本就不见了这种情形真实的很头疼。下面我用自己摸索的经验来给较大家拆解一下别看这篇文章写得有点乱，内容还是能帮你迅速定位问题的。

1、先别急着改代码，先检查文件路径

最常见的原因是路径写错。很更多人会把写成绝对路径， 然后在file: 何不... //协议下浏览器就去找系统根目录下的/js/app.js，当然找不到。

举个例子：

如果你的文件结构是：

/home/user/project/index.html
/home/user/project/js/app.js
/home/user/project/css/style.css

那么正确的引用应当是：

2、采用相对路径还是绝对路径？

相对路径：

相对于当前HTML文件所在的位置来解析，最靠谱。无论你把文件放在哪儿，只要保持同级目录关系，就不会报404。

绝对路径：

不如... 在web服务器上正常， 但在file://下会被当成系统根目录，所以一般不推荐。

方案一：搭建本地Web服务器

这是因为在file://协议下浏览器会把绝对路径解析成根目录，你能够用一个轻巧量级服务器模拟真实正的HTTP周边环境。下面几种做法都能行。

• NPM http-server：
• windows命令行：npm install -g http-server && http-server .
• Python内置服务器：
• MAMP / XAMPP 等传统方式Web服务器：
• Apt install apache2 && systemctl start apache2
• Caddy 或 Nginx 较小配置版：
• Caddy run --config Caddyfile --adapter caddyfile
• 全部这一些服务器默认都会把当前目录当作网站根目录，用http://localhost:8000访问即可。

注意：如果你采用的是Apache + Tomcat混合周边环境， 一定要把静态资源条件放到Tomcat的webapp/static里否则Tomcat会直接忽略掉。

方案二：改为相对路径引用

如果你实在不想跑服务器，能够改成相对路径。但记住一定要确认层级关系没错。比如说 你想从index.html引入../assets/css/main.css， 说明….. 那就必须要保证assets目录确实是在父级里。

错误示例：

正确示例：

常见排查要点

①文件结构检查：确保全部资源条件文件都在同一级或者正确子目录里。 有时我看到项目根下忽然出现了个叫"components"-style 的文件夹，却遗忘改引用。 ②浏览器缓存清理：Ctrl+F5 或者清除缓存再沉重试。有时候陈旧缓存会让你以为是代码问题，其实是缓存老了。 ③编码问题：全部文件最良好统一采用UTF-8，不然有些字符会变成乱码引起脚本落实报错。 ④查看开发者工具网络面板：F12 按钮打开 DevTools， 看哪条申请返回 404 或 500，再根据提示修改即可。有时错误提示是“Failed to load resource”， 当冤大头了。 那就是资源条件没找到；如果是“Unexpected token”，那有可能是 JS 文件被截断或压缩错误。 ;⑤确保没有被防火墙拦截——尤其是在在公司内部网部署时 部分端口有可能被禁用；如果用了自定义端口，举个例子 8081，也得手动打开对应端口。 ;⑥权限问题——Linux 系统下 如果静态资源条件权限设置不够较高，比如只读给 root，则普通用户打开网页时无法读取。chmod -R 755 ./static 就能解决当前这个坑。

较小结：到底该怎么搞？先跑服务器吧！如果你真实的想直接双击，就改成相对路径，再检查一下层级和拼写是不是全拼。别忘了清空缓存，别忘了检查编码！这样就基本不会再出现 JS/CSS 加载失利的问题啦~ 哈哈哈～