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

Question

因此，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还是{{1}的信息。 }和preload。

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

Answer 1

我了解您想使用自己的模板，因此我建议您不要使用它。 “兔子洞”并没有开始描述它的混乱情况。相反，我将自定义插件以获取所需的正确资源。预加载/预取的自定义已在here on the Vue CLI GitHub page处讨论过了

使用vue.config.js，您应该可以chainWebpack向PreloadPlugin添加特定选项（此插件用于管理index.html中的预加载和预取标记注入）。如何链接webpack是here.