Vue-cli如何正确处理<link rel="preload/prefetch">？

Question

如何让webpack正确处理<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>

- disfated

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可能会根据默认的webpack配置对网站图标进行url内联（如果它足够小），这是由vue-cli为您生成的。

- disfated