Symfony Encore/Webpack的asset路径无效，浏览器加载资源失败

Hey there! Let’s work through this issue together—since you’ve followed the official docs and confirmed the compiled files exist with a valid manifest, we can narrow down the most likely culprits:

1. Verify Asset Base Path Configuration #

First, make sure Symfony’s asset helper is resolving paths correctly. Check your config/packages/framework.yaml file for the assets section:

framework:
    assets:
        base_path: '%env(ASSETS_BASE_PATH)%' # Or directly set it if needed, e.g., '/my-project'
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

• If your local server serves the project from a subdirectory (e.g., http://localhost/my-project), the base_path needs to match that subdirectory.
• Always use the {{ asset('build/app.css') }} Twig function instead of hardcoding URLs—this ensures Symfony uses the manifest to resolve the hashed file names correctly.

2. Double-Check Encore’s Manifest Prefix #

In your webpack.config.js, confirm the manifest key prefix matches your build directory structure:

Encore
    // ... other configs
    .setManifestKeyPrefix('build/') // This should match the folder where your assets are compiled (public/build/)
;

A mismatch here will cause the manifest to return incorrect paths that don’t point to your actual compiled files.

3. Clear Symfony’s Cache (Critical for Dev Environment!) #

Symfony caches asset paths in development mode, which can lead to stale references even after you update the manifest. Run this command in your project root:

php bin/console cache:clear --env=dev

This forces Symfony to re-read the latest manifest.json file.

4. Confirm Server Document Root Points to public/ #

If your local server (Apache, Nginx, Symfony Local Web Server) isn’t set to serve files from the public/ directory, Symfony’s asset paths will be incorrect.

• For the Symfony Local Web Server: Run symfony server:start from your project root (it automatically uses public/ as the document root).
• For Apache/Nginx: Update your virtual host configuration to set DocumentRoot to /path/to/your/project/public.

5. Rule Out Browser Caching #

Browsers often cache failed requests (like 404s), so even if you fix the path, the browser might still show an error. Try:

• Hard-refreshing the page (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac)
• Loading the page in incognito/private browsing mode

6. Check for Silent Compilation Errors #

Even if files are generated, Encore might have encountered warnings or errors during compilation that broke the assets. Re-run your build command and check the terminal output:

npm run encore dev

Look for any red error messages—these could point to issues like missing dependencies or invalid CSS/JS syntax that’s preventing the assets from loading properly.

If none of these fix the issue, sharing the exact error message from Chrome’s console (e.g., the full 404 URL that’s failing) would help narrow things down further!

内容的提问来源于stack exchange，提问作者Cédric