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

Question

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

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

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

Template（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

module.exports = {
    publicPath: '/dist/vue/',
    outputDir: './wwwroot/dist/vue/',
    runtimeCompiler: true,
    pages: {
        Search: {
            entry: 'Frontend/vue/Search/main.ts',
            template: 'Views/Mentors/IndexTemplate.cshtml',
            filename: '../../../Views/Mentors/Index.cshtml',
            chunks: ['runtime', 'vue.vendor', 'axios.vendor', 'sentry.vendor', 'Search', 'vendors~Search']
        }
    },
    chainWebpack: config => {
        config.optimization
            .runtimeChunk('single')
            .splitChunks({
                chunks: 'all',
                cacheGroups: {
                    vue: {
                        test: /[\\/]node_modules[\\/](.*vue.*)[\\/]/,
                        name: 'vue.vendor',
                        chunks: 'all',
                    },
                    // ...
                }
            });
    }
}

[我希望，仅将JS块注入到<scripts-section>元素中。

Answer 1

您可以在注入时通过单击html插件来删除thunk，并删除您不想在底部出现的所有块：

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

  return args
})

只需为要从底部从底部省略的每个块追加到数组的末尾。