Laravel mix 生成相对路径答案

【问题标题】：Laravel mix generates relative pathsLaravel mix 生成相对路径
【发布时间】：2017-10-04 12:49:06
【问题描述】：

在生产中，加载我使用的资产，例如：

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

并期望在编译时看到：

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

但是我看到的只是相对路径：

<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 {
    //
}

在最新版本的 Laravel (5.4.21) 上。使用 nginx，在 Ubuntu 16.04 上强制使用 https。不知道为什么路径不是完整的，而是相对的。

编辑：如果我尝试使用 mix 与 asset，而不使用 https，我也会在本地看到相同的行为。协议在这里似乎并不重要。

【问题讨论】：

您应该选择@Devon 答案——这是正确答案，而且要简单得多。
/css/app 是绝对路径，不是相对路径……

标签： laravel laravel-mix

【解决方案1】：

处理此问题的最佳方法是使用 asset() 帮助程序添加您的 APP_URL。

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

【讨论】：

完美运行，无需自定义助手。这应该是公认的答案。

【解决方案2】：

如果您查看source，它就是这样设计的。你总是可以写你自己的助手。

您需要将此添加到helpers 文件中。

use Illuminate\Support\Str;
use Illuminate\Support\HtmlString;

if (! function_exists('mixUrl')) {
    /**
     * Get the path to a versioned Mix file.
     *
     * @param  string  $path
     * @param  string  $manifestDirectory
     * @param  string  $baseUrl
     * @return \Illuminate\Support\HtmlString
     *
     * @throws \Exception
     */
    function mixUrl($path, $manifestDirectory = '', $baseUrl = null)
    {
        static $manifest;

        if (! starts_with($path, '/')) {
            $path = "/{$path}";
        }

        if ($manifestDirectory && ! starts_with($manifestDirectory, '/')) {
            $manifestDirectory = "/{$manifestDirectory}";
        }

        if (file_exists(public_path($manifestDirectory.'/hot'))) {
            return new HtmlString("//localhost:8080{$path}");
        }

        if (! $manifest) {
            if (! file_exists($manifestPath = public_path($manifestDirectory.'/mix-manifest.json'))) {
                throw new Exception('The Mix manifest does not exist.');
            }

            $manifest = json_decode(file_get_contents($manifestPath), true);
        }

        if (!is_null($baseUrl)){
            if (strlen($baseUrl) > 1 && Str::endsWith($baseUrl, '/')) {
                $baseUrl = substr($baseUrl, 0, -1);
            }
            return new HtmlString($baseUrl . $manifestDirectory . $manifest[$path]);
        }

        if (! array_key_exists($path, $manifest)) {
            throw new Exception(
                "Unable to locate Mix file: {$path}. Please check your ".
                'webpack.mix.js output paths and try again.'
            );
        }

        return new HtmlString($manifestDirectory.$manifest[$path]);
    }
}

像刀片一样调用

<script src="{{ mixUrl('/css/app.css', '', 'http://example.com') }}"></script>

【讨论】：

谢谢，这正是我最终要做的事情。这是功能似乎有点奇怪，但无论哪种方式我都让它工作。
很高兴它有帮助！在使用 Laravel 一段时间后，一旦觉得没有意义，我就去找源头。

【解决方案3】：

最好的方法是使用asset() 助手。但是还有另一种方法可以使用url() 或secure_url() helper 来处理这个问题

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

或

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

【讨论】：

【解决方案4】：

这是我从 TwigExtension 调用的函数，在 laravel 5 上。* 你可以做一个辅助函数。

// use Illuminate\Foundation\Mix;

function mix_url($path, $manifestDirectory = ''){

    return asset(app(Mix::class)(...func_get_args()));
}

您还需要在 .env 上定义 ASSET_URL

【讨论】：