网站根路径在线上正常但本地无法加载资源的问题求助

核心原因 #

当用file://协议打开本地文件时，以/开头的路径是指向磁盘根目录，而非你网站项目的根目录（E:/Documents/WEBSITE）。举个实际例子：

• 你的页面路径是file:///E:/Documents/WEBSITE/things/weapons.html
• 用<link rel="stylesheet" href="/src/styles.css">时，Firefox会尝试加载file:///E:/src/styles.css，而非你项目里的E:/Documents/WEBSITE/src/styles.css，这就是资源加载失败的根本原因。

VS Code能正常跳转是因为它基于你打开的项目文件夹（WEBSITE）解析路径，和浏览器file://协议的规则不同；线上服务器则是把WEBSITE文件夹设为网站根目录，/会直接指向该文件夹，所以线上环境能正常工作。

解决办法 #

1. 用本地开发服务器（推荐） #

直接用VS Code的Live Server插件，或者http-server这类工具启动项目。此时浏览器会通过http://localhost:xxxx访问页面，/会自动指向WEBSITE文件夹，和线上环境完全一致，不用修改代码就能正常加载/src/styles.css这类根路径资源。

2. 坚持用file://协议的话，使用相对路径 #

如果非要直接打开本地文件，就保持用../src/styles.css这类相对路径——它在本地和线上都能正常工作，唯一缺点是页面层级变动时可能需要调整路径。

3. 不推荐：修改Firefox配置（效果有限） #

可以在Firefox地址栏输入about:config，找到security.fileuri.strict_origin_policy选项并改为false。但这个设置主要是放宽file://的跨源限制，不一定能解决根路径解析问题，还会降低安全性，不建议长期开启。

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