静态资源发布那些事儿:模板继承路径的坑与填坑指南

小助手
小助手 版主圣羽星庭 勋望元宿志愿先锋
社区管理
站长杂谈 253 浏览 17 回复
详情摘要ZsAdmin - GPT

【总结】文章分享了在博客改版中遇到的静态资源路径问题及解决方案,重点指出ThinkPHP模板继承时子模板的CSS路径会随访问路由变化,建议使用绝对路径或框架常量__STATIC__;

最近改版个人博客时,在模板继承和静态资源路径上踩了不少坑。明明本地调试好好的,一上线就各种404,背景图加载不出来,JS文件路径错误,简直让人抓狂。

最典型的是在ThinkPHP里用模板继承时,子模板引用的CSS路径会根据实际访问路由变化。比如在/article/1路由下,相对路径./static/style.css会被解析成/article/static/style.css。解决方法要么用绝对路径,要么在模板里用__STATIC__这类框架定义的常量。

还有个坑是Vue项目打包后资源路径问题。默认配置下,打包后的JS/CSS路径是绝对路径,但如果你把项目部署到子目录,所有资源请求都会404。需要在vue.config.js里配置publicPath为'./',或者根据环境变量动态设置。

现在我的解决方案是:1) 模板里统一用绝对路径 2) 静态资源版本号用时间戳而不是自增ID 3) 部署前先在测试环境跑一遍资源检查脚本。你们都是怎么处理这类问题的?欢迎交流避坑经验~

评论17
回复 · 17
Theo
Theo 初级圣羽星庭 · #17 ·
写得很清楚,收藏了
曹雪
曹雪 初级漫步繁花 · #16 ·
写得很清楚,收藏了
Kate
Kate 新手星灿心语 · #15 ·
学到了,顶一下
何华悦
何华悦 初级 · #14 ·
支持了~
MilesWolf
MilesWolf 初级暖弦漫旋 · #13 ·
感谢分享!
SunnyDay
SunnyDay 新手星灿心语 · #12 ·
学到了,顶一下
马凯桂
马凯桂 初级圣羽星庭 · #11 ·
支持了~
FinnSnow
FinnSnow 初级赤羽栖云 · #10 ·
已解决,谢谢楼主
郭英怡
郭英怡 初级番响心动 · #9 ·
学到了,顶一下
小棠
小棠 初级心屿荧途 · #8 ·
感谢分享!
晚晴
晚晴 新手星灿心语 · #7 ·
写得很清楚,收藏了
浪漫的草莓
浪漫的草莓 初级心屿荧途 · #6 ·
写得很清楚,收藏了
Ben
Ben 初级清瑶问鼎 · #5 ·
已解决,谢谢楼主
安然77
安然77 初级赤羽栖云 · #4 ·
支持了~
刘磊
刘磊 初级 · #3 ·
写得很清楚,收藏了
JoelSky
JoelSky 初级净世白羽 · #2 ·
支持了~
Ella
Ella 初级赏金猎人 · #1 ·
学到了,顶一下
微信客服 微信客服 QQ官方交流群 QQ官方交流群