vue.js - 如何使用 vue-cli 指定在 html 模板中注入(inject) block 的位置？

Question

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

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

有没有正确的方法，如何在 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 block 将仅注入(inject) <scripts-section>元素。

Answer 1

供其他人将来引用:
在 vue.config.js 文件，我们 还有必须添加 html 插件的配置，并设置 注入(inject) 为假:

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 .