根本原因是file://协议下浏览器将“/css/style.css”这类根相对路径解析为系统盘根目录（如c:/css/style.css），而非项目文件夹；而http服务器环境下，“/”才指向服务根目录。
直接打开本地 index.html 文件时资源加载失败，根本原因不是 HTML 写错了，而是浏览器用 file:// 协议加载时，/css/style.css 这类以斜杠开头的路径会去读取你电脑的根目录（比如 C:/css/style.css），而不是项目文件夹里那个 CSS。
为什么 /css/style.css 在本地打不开
这是最典型的路径误解：以 / 开头的路径叫「根相对路径」，它依赖的是「当前网页所在的服务根目录」，不是你双击打开的那个文件夹。而 file:// 协议下根本没有“服务根目录”的概念，浏览器只能硬往系统盘根找。
- 开发时用
http-server或live-server启动，/css/style.css才真正指向服务器根目录下的css/ - 直接双击
index.html，所有/xxx都变成file:///xxx，99% 情况下找不到 - Vue / React 项目打包后也一样——没起服务，就别指望
publicPath: '/'能工作
vue.config.js 里改 publicPath 的真实作用
这个配置不解决「能不能打开」，它只决定打包时生成的资源引用路径长什么样。设成 './' 后，index.html 里写的就变成 ./js/app.js，这样双击打开时才真正在同目录下找。
-
publicPath: '/'→index.html中写<script src="/js/app.js"></script>→ 本地双击必 404 -
publicPath: './'→<script src="./js/app.js"></script>→ 同目录能找到，但多级路由（如/user/profile）下可能出问题 -
publicPath: ''（空字符串）→src="js/app.js"，更轻量，适合纯静态单页
检查 index.html 里资源路径是否真的匹配文件结构
别光看路径写法，要确认物理文件是否存在、大小写是否一致、有没有多套 index.html 干扰。尤其 Vue CLI 项目，/public/index.html 是模板，/dist/index.html 是产物，改错地方等于白干。
- 用命令行快速定位所有
index.html：find . -name "index.html" -not -path "./node_modules/*" - 打开浏览器开发者工具（F12），看 Network 标签页里哪个请求标红，点开看「Preview」或「Response」是不是空白或 404
- 点击红色请求的 URL，如果浏览器跳转到一个地址但显示
Index of /，说明服务器找到了目录，但没找到你要的文件——路径还是不对 - Linux / macOS 部署时，
Image.png和image.png是两个文件，拼错大小写就是 404
部署在子目录时，路径前缀容易被忽略
比如你把打包后的 dist/ 放到 Nginx 的 /my-app/ 目录下，访问地址是 https://example.com/my-app/，那 publicPath 就不能是 '/' 或 './'，得是 '/my-app/'，否则所有资源都会去请求 https://example.com/js/app.js。
- Vue CLI 项目：在
vue.config.js中设publicPath: '/my-app/' - Vite 项目：对应配置
base: '/my-app/' - 静态服务器（如 Nginx）需确保该子目录可被正确路由，且不拦截
index.html的 fallback
路径问题本身不难，难在错误现象和根源之间隔着一层协议抽象。本地双击、http-server、Nginx、CDN、子目录部署……每种场景下「根」的定义都不同，盯着控制台报错里的请求地址看，比猜配置更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
