时间戳

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

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

问题描述

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

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

我过去通过使用类似这个例子的东西来做到这一点，但它不包括preloadandprefetch属性。

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

我查看了htmlWebpackPlugin对象内部的所有可用信息，但我没有看到任何可以用来确定资产是否应该使用prefetch或preload与as=script.

我怎样才能做到这一点？显然 vue-cli 3 正在这样做，但我不确定如何。

标签： vue.jswebpackwebpack-4vue-clivue-cli-3

解决方案

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

使用 vue.config.js，您应该能够链接 Webpack以将特定选项添加到 PreloadPlugin（此插件用于管理 index.html 中的预加载和预取标记注入）有关如何链接 webpack 的更多信息和示例在这里。

推荐阅读