Angular5 & Laravel构建后字体、图片、JS缺失，如何修改构建路径？

Hey there, let's sort out this resource path problem you're facing. I've worked with this exact Laravel + Angular stack before, so here's a straightforward, proper fix instead of moving files around as a temporary hack:

1. Correct Angular's Build Base Paths #

First, head to your Angular 5 project's root and open the .angular-cli.json file (this is the config file for Angular 5; later versions use angular.json). Look for the apps array and update these two key settings:

{
  "apps": [
    {
      "root": "src",
      "outDir": "../public/dist", // Double-check this points to Laravel's public/dist (relative to Angular's root)
      "baseHref": "/dist/", // This sets the browser's base URL for your Angular app
      "deployUrl": "/dist/", // Critical: Adds this prefix to all resource references during build
      // Keep the rest of your existing config here
    }
  ]
}

• outDir: Confirm this is correctly pointing to Laravel's public/dist—this tells Angular where to output compiled files.
• baseHref: Since your app lives at your-domain.com/dist/, this ensures Angular knows its root path.
• deployUrl: This is the big one. It tells Angular to prepend /dist/ to every image, font, and JS chunk reference in the compiled index.html and component styles. No more broken paths!

2. Update Laravel's Routing and View #

Next, make sure Laravel serves your Angular app correctly. Open routes/web.php and add a catch-all route:

Route::get('/{any}', function () {
    return view('index');
})->where('any', '.*');

Then, create or update resources/views/index.blade.php to load your Angular app properly. Make sure the <base> tag matches your baseHref from Angular's config:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Your App Name</title>
  <base href="/dist/">
  <!-- Add any other meta tags or styles here -->
</head>
<body>
  <app-root></app-root>
  <!-- These script paths will now correctly point to public/dist -->
  <script type="text/javascript" src="/dist/runtime.js"></script>
  <script type="text/javascript" src="/dist/polyfills.js"></script>
  <script type="text/javascript" src="/dist/styles.js"></script>
  <script type="text/javascript" src="/dist/vendor.js"></script>
  <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

3. Verify Angular Asset Configuration #

If you're using relative paths for images/fonts in Angular components (like ./assets/images/logo.png), make sure your assets folder is set to be copied during build. In .angular-cli.json, check the assets array:

{
  "apps": [
    {
      // Other config...
      "assets": [
        "assets",
        "favicon.ico"
      ],
      // Other config...
    }
  ]
}

This ensures everything in src/assets gets copied to public/dist/assets, so your component references resolve to /dist/assets/... correctly.

4. Rebuild Your Project #

Finally, run the Angular build command again (use --prod for production):

ng build --prod

After building, check public/dist—you'll see all your assets are there, and the index.html will have resource paths starting with /dist/, so the browser can find them without you moving files manually.

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