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

Question

因此 vue-cli 3 会自动将所有 Assets 文件的链接注入(inject)到 HTML 文件中。它还包括具有 preload 和 prefetch 属性的 Assets 。

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

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

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

我查看了 htmlWebpackPlugin 对象中的所有可用信息，但我没有看到任何可用于确定 Assets 是否应使用 prefetch 或 preload 并使用 as=script。

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

Answer 1

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

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