Question

我正在使用vue-cli生成的项目，并在cardnum2=int(input("do you want your Ace to be a 1 or a 11?"))中指定了pages。 Vue自动在HTML模板文件的末尾注入JS块。但是我需要指定一个不同的位置以将它们放置在该文件中。

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

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

模板（IndexTemplate.cshtml）

<%= htmlWebpackPlugin ...

生成的文件（Index.cshtml）

...

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

</scripts-section>

如您所见，它被插入了两次。在文件末尾不能选择它。

vue.config.js

...

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

我希望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', }, // ... } }); } }元素中。

Answer 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。

Answer 2

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

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

  return args
})

对于要从底部开始省略的每个块，只需继续添加到数组中即可。

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

2 个答案: