Laravel mix generates relative paths

Question

On production, to load my assets I use for example:

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">

and expect to see when compiled:

<link href="https://example.com/css/app.083fd04ba374238b03b23e742c997718.css" rel="stylesheet">

However I am just seeing the relative path:

<link href="/css/app.083fd04ba374238b03b23e742c997718.css" rel="stylesheet">

webpack.mix.js:

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .sass('resources/assets/sass/print.scss', 'public/css')
  .copy([
    'node_modules/bootstrap-sass/assets/fonts/bootstrap',
    'node_modules/font-awesome/fonts',
  ], 'public/fonts')
  .sourceMaps();

if (mix.config.inProduction) {
  mix
    .version()
    .disableNotifications();
} else {
    //
}

On latest version of Laravel (5.4.21). Using nginx, forcing https on Ubuntu 16.04. No idea why the paths are not full, but relative.

EDIT: I am also seeing the same behavior locally if I try to use mix vs asset, without https. Protocol seems not matter here actually.

Answer 1

The best way to handle this is to use the asset() helper to prepend your APP_URL.

<script src="{{ asset(mix('css/app.css')) }}"></script>