MVC模式下HTML引入CSS失效,自制模板引擎路径配置问题求助
MVC项目CSS资源加载失败解决方案
问题根因分析
你当前的路径配置和MVC项目的入口规则不匹配:标准MVC项目的唯一对外入口是public/index.php,Web服务器默认会将站点根目录映射到public文件夹,你在模板中写入public/styles/stylesheet.css会被解析为访问public/public/styles/stylesheet.css,自然找不到资源。
可行解决方案
方案1(推荐):调整Web服务器根目录配置
将Apache/Nginx的站点DocumentRoot指向你项目的public文件夹,操作如下:
- Apache修改httpd.conf或者站点vhost配置:
DocumentRoot "/你的项目路径/public" <Directory "/你的项目路径/public"> AllowOverride All Require all granted </Directory> - Nginx修改站点配置:
root /你的项目路径/public; index index.php;
配置完成后重启服务器,将模板中的CSS路径修改为:
<link rel="stylesheet" href="/styles/stylesheet.css"/>
该方案同时可以避免modules目录下的敏感代码被外部直接访问,符合MVC项目的安全规范。
方案2:无法修改服务器配置时调整重写规则
如果是虚拟主机等场景无法修改根目录配置,将public目录下的.htaccess移动到项目根目录,替换为以下规则:
RewriteEngine On # 静态资源直接访问public目录 RewriteCond %{REQUEST_URI} ^/(images|js|styles)/ RewriteRule ^(.*)$ public/$1 [L] # 其他请求转发到入口文件 RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ public/index.php?$1 [L]
之后模板中的CSS路径同样改为/styles/stylesheet.css即可。
方案3:模板引擎增加全局路径变量避免硬编码
在项目的bootstrap.php中定义全局基础路径常量:
// 部署在根路径时写'/', 部署在子目录时写'/项目名/' define('BASE_URL', '/');
修改你的模板引擎/modules/core/src/templating/templater.php,渲染模板前将BASE_URL作为全局变量注入所有模板,之后模板中的资源路径统一写为:
<link rel="stylesheet" href="<?= BASE_URL ?>styles/stylesheet.css"/>
该方案可以保证后续项目迁移部署时不需要批量修改模板内的资源路径。
验证方法
修改完成后直接在浏览器地址栏输入http://你的域名/styles/stylesheet.css,如果可以正常打开CSS文件内容,说明路径配置正确,刷新页面即可看到样式生效。
内容的提问来源于stack exchange,提问作者Tobiaske1234
相关产品推荐
相关产品推荐

