如何在 Vue-CLI 3 中将预取和预加载资源插入到我的自定义 HTML 文件中？

Posted 2023-02-22

【中文标题】如何在 Vue-CLI 3 中将预取和预加载资源插入到我的自定义 HTML 文件中？

【英文标题】：How Can I Insert the Prefetch & Preload Assets into my Custom HTML File in Vue-CLI 3?

【发布时间】：2019-02-12 04:56:28

【问题描述】：

所以 vue-cli 3 会自动将所有指向资产文件的链接注入到 html 文件中。它还包括具有preload 和prefetch 属性的资产。

我想使用我自己的 HTML 模板，并使用 preload 和 prefetch 属性将这些相同的资产插入其中。

我过去曾使用类似此示例的方法完成此操作，但它不包括 preload 和 prefetch 属性。

<% for (var chunk in htmlWebpackPlugin.files.chunks)  %>
<script src="% static '<%= htmlWebpackPlugin.files.chunks[chunk].entry %>' %"></script>
<%  %>

我查看了 htmlWebpackPlugin 对象内的所有可用信息，但我没有看到任何可以用来确定资产是否应该使用 prefetch 或 preload 以及 @987654331 @。

我该怎么做？显然 vue-cli 3 正在这样做，但我不确定如何。

【参考方案1】：

我了解您想使用自己的模板，但我建议您不要这样做。 “兔子洞”并没有开始描述弄乱它。相反，我会自定义插件以获得正确的资源呈现你喜欢的方式。已详细讨论了预加载/预取的自定义here on the Vue CLI GitHub page

使用 vue.config.js，您应该能够 chainWebpack 向 PreloadPlugin 添加特定选项（此插件用于管理 index.html 中的预加载和预取标记注入）更多信息和示例如何链式 webpack 是 here.