Symfony 7资源加载上下文路径错误，带前缀路由下资源404求助

问题根源 #

你模板里用的是相对路径（比如assets/js/layout.js），当访问/user/list这类子路由时，浏览器会把相对路径解析为当前路由的子路径，也就是/user/assets/...，但实际资源部署在/assets/...（public/assets目录下），所以触发404错误。

解决方案 #

方案1：使用Twig的asset()函数（推荐）

Symfony自带的asset()函数会自动生成基于public目录的绝对URL，不管当前路由层级，都能正确指向资源：

<!-- Layout config Js -->
<script src="{{ asset('assets/js/layout.js') }}"></script>
<!-- Bootstrap Css -->
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="{{ asset('assets/css/app.min.css') }}" rel="stylesheet" type="text/css" />
<!-- custom Css-->
<link href="{{ asset('assets/css/custom.min.css') }}" rel="stylesheet" type="text/css" />

方案2：用Webpack Encore的entrypoint标签（更规范）

你已经在webpack.config.js里定义了资源入口，直接用Encore提供的Twig函数加载资源，还能自动处理版本缓存、路径：

{# 加载所有CSS入口 #}
{{ encore_entry_link_tags('bootstrap', 'icons', 'app', 'custom') }}
{# 加载JS资源，若layout.js已合并到entry里，直接引用对应entry即可 #}
<script src="{{ asset('assets/js/layout.js') }}"></script>

方案3：手动改为绝对路径

如果不想用Twig函数，直接给路径加前缀斜杠，强制浏览器从根目录加载：

<!-- Layout config Js -->
<script src="/assets/js/layout.js"></script>
<!-- Bootstrap Css -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- 其他资源同理 -->

注意：这种方式在部署到子目录的环境中需要手动调整路径，灵活性较差。

额外检查 #

你的webpack.config.js配置是正确的：setPublicPath('/assets')和setOutputPath('public/assets/')已经正确指定了资源的输出位置和访问路径，无需修改。

内容的提问来源于stack exchange，提问作者user3296316