Vue-cli 正确处理 <link rel="preload/prefetch">
Vue-cli correct processing of <link rel="preload/prefetch">
如何让 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>
解决方法：
<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-inline 根据默认的 webpack 配置 vue-cli 为您生成的 favicon（如果它足够小）。
如何让 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>
解决方法：
<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-inline 根据默认的 webpack 配置 vue-cli 为您生成的 favicon（如果它足够小）。