如何使用 vue-cli 指定在 html 模板中注入块的位置？

Question

我正在使用 vue-cli 生成的项目并pages在vue.config.js. Vue 会在 HTML 模板文件的末尾自动注入 JS 块。但是我需要指定一个不同的位置来将它们放在那个文件中。

标准的 Webpack 语法并没有真正的帮助 ( <%= htmlWebpackPlugin ...)。它实际上在那里注入了块，但是无论如何这些块都会再次插入到页面的末尾。

有没有正确的方法，如何在 HTML 文件中指定确切的位置以使用 vue-cli 进行构建，而不是文件的默认结尾（或在我的模板中不存在的之前）？

模板 (IndexTemplate.cshtml)

...

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

</scripts-section>

生成的文件 (Index.cshtml)

...

<scripts-section>
    <script src="/dist/vue/runtime.js"></script>
    <script src="/dist/vue/sentry.vendor.js"></script>
    <script src="/dist/vue/axios.vendor.js"></script>
    <script src="/dist/vue/vue.vendor.js"></script>
    <script src="/dist/vue/vendors~Search.js"></script>
    <script src="/dist/vue/Search.js"></script>

</scripts-section>

<script type="text/javascript" src="/dist/vue/runtime.js"></script><script type="text/javascript" src="/dist/vue/sentry.vendor.js"></script><script type="text/javascript" src="/dist/vue/axios.vendor.js"></script><script type="text/javascript" src="/dist/vue/vue.vendor.js"></script><script type="text/javascript" src="/dist/vue/vendors~Search.js"></script><script type="text/javascript" src="/dist/vue/Search.js"></script>

如您所见，它被插入了两次。将它放在文件末尾不是这里的选项。

vue.config.js

...

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

</scripts-section>

我希望 JS 块只会注入<scripts-section>元素中。

Answer 1

您可以通过点击插件在注入时删除 thunk html，并删除您不想出现在底部的任何块：

config.plugin('html').tap((args) => {
  args[0].excludeChunks = ['app', 'runtime', 'chunk-vendors']

  return args
})

只需继续将您希望从底部省略的每个块附加到数组即可。