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

Posted 2023-02-22

【中文标题】Vue-cli 正确处理<link rel="preload/prefetch">

【英文标题】：Vue-cli correct processing of <link rel="preload/prefetch">

【发布时间】：2019-11-09 14:46:18

【问题描述】：

如何让 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>

【参考方案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 那个 favicon（如果它足够小的话）。