Vue-Cli правильная обработка

Question

Как сделать так, чтобы веб-пакет правильно обрабатывал активы в <link rel="preload/prefetch"> тегах?

Например, при использовании внутри /public/index.html

<link rel="preload" href="@/assets/fonts/myfont.woff2" as="font" crossorigin>

webpack должен снять отпечаток файла и скопировать в /fonts так же, как в случае

url('~@/assets/fonts/myfont.woff2'); /* inside css */

В результате

<link rel="preload" href="/fonts/myfont.$HASH$.woff2" as="font" crossorigin>

Answer 1

Решение:

<link rel="preload" href="<%= require('@/assets/fonts/myfont.woff2') %>" as="font" crossorigin>

Имейте в виду, что если вы, например, хотите

<link rel="icon" href="<%= require('@/assets/favicon.png') %>" type="image/png">

webpack, вероятно, будет использовать встроенный в этот URL значок (если он достаточно мал) в соответствии с конфигурацией webpack по умолчанию, которую генерирует vue-cli для вас.