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>

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