XAMPP多端口配置后CSS样式加载失败解决-php教程-PHP中文网

css 404 的根本原因是 php 拼接资源路径时未正确处理端口号：$_server['server_name'] 不含端口，需结合 $_server['server_port'] 判断并显式拼接非标准端口（如 :88），否则浏览器请求地址与实际路径不匹配。

xampp多端口配置后css样式加载失败解决

直接结论：CSS 404 不是文件没放对位置，而是 PHP 动态拼路径时漏了端口号——$_SERVER['SERVER_NAME'] 不带端口，$_SERVER['SERVER_PORT'] 才是关键。

为什么改了 XAMPP 端口（比如 :88）后 CSS 就 404？

浏览器实际请求的是 http://localhost:88/assets/style.css，但 PHP 生成的 <link href="..."> 地址却是 http://localhost/assets/style.css（缺 :88）。原因在于：$_SERVER['SERVER_NAME'] 只返回 localhost，不包含端口；而 Apache 监听的是 :88，浏览器向默认的 :80 发请求，自然 404。

常见错误写法示例：

$path = "http://" . $_SERVER['SERVER_NAME'] . __DIR__ . "/"; // ❌ 永远没端口
define('ASSETS', str_replace("app/core", "public/assets", $path));

正确做法必须显式判断并拼接端口：

当 $_SERVER['SERVER_PORT'] 是 '80' 或 '443' 时，URL 中省略端口（HTTP/HTTPS 默认行为）
其他端口（如 '88'、'8080'）必须显式加上 ':' . $_SERVER['SERVER_PORT']
不要硬编码 ':88'，否则部署到其他端口又失效

如何安全拼出带端口的资源基础路径？

用这个逻辑块替换你原来拼 ROOT 或 ASSETS 的代码：

$port = ($_SERVER['SERVER_PORT'] == '80' || $_SERVER['SERVER_PORT'] == '443') 
    ? '' 
    : ':' . $_SERVER['SERVER_PORT'];
$path = "http://" . $_SERVER['SERVER_NAME'] . $port . str_replace($_SERVER['DOCUMENT_ROOT'], '', __DIR__) . "/";
define('ASSETS', str_replace("app/core", "public/assets", $path));

注意三点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

str_replace($_SERVER['DOCUMENT_ROOT'], '', __DIR__) 比直接拼 __DIR__ 更可靠，避免路径重复或越界
别用 $_SERVER['HTTP_HOST'] 替代——它可能被客户端篡改，且含端口时格式不稳定（如 localhost:88 或 [::1]:88）
如果项目部署在子目录（如 http://localhost:88/myapp/），这个方案仍会出错；此时应改用相对路径或 $_SERVER['SCRIPT_NAME'] 推导

检查 Network 面板里 CSS 请求的真实 URL

按 F12 → Network → 刷新 → 筛选 .css，点开那个失败的请求，看 Headers 标签页里的 Request URL：

如果是 http://localhost/css/style.css → 说明 PHP 拼路径没带端口，回到上一步修逻辑
如果是 http://localhost:88/css/style.css 但状态仍是 404 → 检查文件是否真在 XAMPP\htdocs\css\style.css，注意大小写和斜杠方向（Windows 下通常不敏感，但 Docker 或 Linux 部署会翻车）
如果是 http://192.168.x.x:88/... → 说明你在手机访问，但 Apache 未配置允许外部访问（见下一条）