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

Posted 2023-02-22

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

【英文标题】：How to specify where to inject chunks in html template with vue-cli?

【发布时间】：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> 元素中。

【参考方案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
)

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