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

【问题标题】：How to specify where to inject chunks in html template with vue-cli?如何使用 vue-cli 指定在 html 模板中注入块的位置？
【发布时间】：2019-10-12 01:30:57
【问题描述】：

我正在使用 vue-cli 生成的项目，并在 vue.config.js 中指定了 pages。 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

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> 元素中。

【问题讨论】：

标签： vue.js webpack vue-cli-3

【解决方案1】：

供其他人日后参考：

在 vue.config.js 文件中，我们还必须添加 html 插件的配置，并将 inject 设置为 false：

config.plugin("html").tap((args) => {
  args[0].inject = false;
  return args;
});

为了清楚起见，下面给出了 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",
        },
        // ...
      },
    });
    config.plugin("html").tap((args) => {
      args[0].inject = false;
      return args;
    });
  },
};

如需更详细的示例，请访问link。

【讨论】：

【解决方案2】：

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

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

  return args
})

从底部开始，为您希望从底部省略的每个块继续追加到数组中。

【讨论】：