vue.js - Vue-cli 正确处理<link rel ="preload/prefetch">

Question

如何让 webpack 正确处理 <link rel="preload/prefetch"> 中的 Assets 标签？

例如，在 /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 配置来 url-inline 该图标(如果它足够小)。