Symfony 7 资源加载了错误的上下文路径

Question

我正在使用 Symfony 7.0 开发一个 Web 应用程序。我有一个给定的 UI 模板 (Velzon)。有一个 public/assets 文件夹以及顶部的 asset。 不，我已经创建了一个简单的控制器，路径为 /user/list。我想渲染模板 user_admin/list.html.twig。

在需要渲染的模板中，有这样的css/js：

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

当我使用 / 调用路由时，所有资源都会正确加载。当我调用新控制器 /user/list 时，无法加载任何资源，因为找不到文件，例如

list:15 
 GET http://localhost:8000/user/assets/libs/jsvectormap/css/jsvectormap.min.css net::ERR_ABORTED 404 (Not Found)
list:17 
 GET http://localhost:8000/user/assets/libs/swiper/swiper-bundle.min.css net::ERR_ABORTED 404 (Not Found)

对资源的每个请求都有一个前缀“user”。我认为，这就是它不起作用的原因。有谁知道如何解决这个问题吗？

我认为该项目正在使用Webpack，这里你可以看到配置：

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const RtlCssPlugin = require('rtlcss-webpack-plugin');

Encore
  .setOutputPath('public/assets/')
  .setPublicPath('/assets')
  .addEntry('app', './assets/scss/config/default/app.scss')
  .addEntry('bootstrap', './assets/scss/config/default/bootstrap.scss')
  .addEntry('icons', './assets/scss/icons.scss')
  .addEntry('custom', './assets/scss/config/default/custom.scss')
  .enableSingleRuntimeChunk()
  .enableSassLoader()
  .configureFilenames({
    css: 'css/[name].min.css',
  })

  .copyFiles({
    from: './assets/fonts',
    to: 'fonts/[name].[ext]',
  })

  .copyFiles({
    from: './assets/images',
    to: 'images/[path][name].[ext]',
  })

  .copyFiles({
    from: './assets/js',
    to: 'js/[path][name].[ext]',
  })

  .copyFiles({
    from: './assets/json',
    to: 'json/[name].[ext]',
  })

  .copyFiles({
    from: './assets/lang',
    to: 'lang/[name].[ext]',
  })

  .copyFiles({
    from: './assets/libs',
    to: 'libs/[path][name].[ext]',
  })

  /*
   * RTL CSS GENERATION
   */
  // .addLoader({
  //   test: /\.scss$/,
  //   use: [
  //     'css-loader',
  //     'sass-loader',
  //     {
  //       loader: 'sass-loader',
  //       options: {
  //         // rtlcss options, if needed
  //       },
  //     },
  //   ],
  // })

  // .webpackConfig({
  //   plugins: [
  //       new RtlCssPlugin()
  //   ],
  //   stats: {
  //       children: true,
  //   },
  // })

  .addPlugin(new RtlCssPlugin({
    filename: 'css/[name]-rtl.min.css',
  }))

  /*
   * FEATURE CONFIG
   */
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications();

module.exports = Encore.getWebpackConfig();

非常感谢！

安德烈亚斯

Answer 1

您应该使用 Twig 的

asset

函数来获取正确的路径。

<!-- 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" />