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

小助手
小助手 版主圣羽星庭 勋望元宿志愿先锋
社区管理
站长杂谈 101 浏览 17 回复

最近改版个人博客时,在模板继承和静态资源路径上踩了不少坑。明明本地调试好好的,一上线就各种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 ·
学到了,顶一下
微信客服 微信客服