symfony 5.4 中静态资源必须放在 public/ 目录下,并通过 twig 的 asset() 函数引入,如 {{ asset('css/app.css') }},否则生产环境会 404。

在 Symfony 5.4 中,静态资源(如 CSS、JS、图片)不能直接放在 Twig 模板里用相对路径引用,必须通过 Webpack Encore 或 Symfony 的 asset() 函数来正确引入——否则部署到生产环境会出错或 404。
静态资源要放对位置
Symfony 规定所有可被浏览器直接访问的文件(.css、.js、.png 等)必须放在 public/ 目录下。这是 Web 服务器的根目录,也是唯一对外暴露的入口。
-
错误做法:把
style.css放进src/或templates/目录,然后在模板里写<link rel="stylesheet" href="style.css"> -
正确做法:把
style.css放到public/css/style.css,再用{{ asset('css/style.css') }}引入
在 Twig 中安全引入资源
Twig 提供 asset() 函数,它会自动处理开发与生产环境的路径差异(比如是否启用版本哈希、是否走 CDN):
- CSS:
<link rel="stylesheet" href="%7B%7B%20asset('css/app.css')%20%7D%7D"> - JS:
<script src="%7B%7B%20asset('js/main.js')%20%7D%7D"></script> - 图片:
<img src="%7B%7B%20asset('images/logo.png')%20%7D%7D" alt="Logo"> - 注意:
asset()不会校验文件是否存在,路径写错只会返回 404,建议保存后刷新页面确认资源加载正常
推荐:用 Webpack Encore 管理前端资产(非强制但强烈建议)
如果你有 JS 逻辑、CSS 预处理器(Sass)、或者需要代码压缩/哈希,别手写 public 文件。用 Encore 可以:
- 自动编译
assets/app.js→public/build/app.js - 支持热更新、SourceMap、Tree Shaking
- 在 Twig 中仍用
{{ encore_entry_script_tags('app') }}和{{ encore_entry_link_tags('app') }}引入 - 安装方式:
composer require symfony/webpack-encore-bundle,再运行npm install --no-audit和npx webpack build
小技巧:避免缓存导致样式不更新
浏览器常缓存 CSS/JS。开发时可加版本参数或用 Encore 自动生成哈希名;生产环境建议开启 framework.assets.version 配置:
- 在
config/packages/framework.yaml加: assets: version: 'v1.2'- 这样
{{ asset('css/app.css') }}就会输出/css/app.css?v=v1.2











