css路径错误主因是基准点混淆：中href以html所在目录为相对起点，/开头路径依赖服务器根配置，file://下/指向磁盘根导致404；推荐用构建工具统一处理路径。
直接用 / 开头的绝对路径，90% 的情况反而会让问题更难排查——它把路径正确性完全交给服务器配置，而你未必能控制所有环境。
为什么 /css/style.css 在本地双击打开就 404
因为 file:// 协议下，/ 指向的是你电脑的磁盘根目录（比如 C:/），不是项目文件夹。浏览器会去请求 file:///css/style.css，显然不存在。
- Live Server、Vite dev server、Nginx 等 HTTP 服务才支持以
/为站点根目录 - 同一份 HTML，在
file://和http://localhost:5173下，/css/style.css解析结果完全不同 - 如果你没改过构建工具的
base配置，Vite 默认输出相对路径（如css/style.css），硬写成/css/style.css就会和实际输出不匹配
href 里该用 ./ 还是直接写 css/style.css
./ 是冗余的——它等价于“当前目录”，而浏览器解析相对路径时，默认起点就是当前 HTML 所在目录，加不加 ./ 效果一样，但多写容易出错（比如误写成 .\css\style.css，反斜杠在 HTML 中无效）。
- HTML 在
/src/pages/index.html，CSS 在/src/css/style.css→ 写href="css/style.css" - HTML 在
/src/pages/a/b.html，CSS 在/src/css/style.css→ 写href="../../css/style.css" - 避免嵌套多层
../，超过两次就该考虑调整目录结构或换构建工具处理
构建工具里配 base 比手写 / 路径更可靠
Vite 的 vite.config.ts 里设 base: "./"，Webpack 的 output.publicPath 设为 "./"，能让所有资源路径都基于 HTML 当前位置解析，不依赖服务器根目录。
- 本地预览、GitHub Pages、子路径部署（如
https://user.github.io/my-app/）都能正常加载 - 如果必须部署到子路径，Vite 改成
base: "/my-app/"，Webpack 改publicPath: "/my-app/"，HTML 中的href仍保持相对写法，由构建工具自动补全 - 别在 HTML 里混用
base标签和手写绝对路径——它会影响所有相对链接（包括图片、a 标签），容易引发连锁错误
CSS 文件内部的 url() 路径和 <link> 完全无关
这是最容易被忽略的一点：<link href="css/style.css"> 的路径对错，不影响 style.css 里 background-image: url(../img/logo.png) 的解析逻辑——后者永远以 style.css 自身位置为起点。
- 挪动 CSS 文件时，所有
url()都要跟着重算，不能只改<link> - SCSS/Sass 中用
@import引入变量文件，其路径也以当前 SCSS 文件为基准，不是 HTML - 单文件组件（.vue）中
<style></style>标签内的url()，需构建工具显式支持别名（如 Vite 的@/assets/），否则照样 404
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
