Vue cli 移除脚本注入答案

【问题标题】：Vue cli remove script injectionVue cli 移除脚本注入
【发布时间】：2021-03-29 09:28:43
【问题描述】：

我在 wordpress 中使用 vue cli。 Wordpress 有自己的方式将脚本添加到 DOM。因此，我不需要 vue cli 将脚本添加到最终的 index.html 文件中。当我运行 npm run build 时，我得到如下信息：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>my-app</title>
  <link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>

我希望在运行 build 时不要注入标签和 css。发生的事情是当 html 文件运行时，我得到一堆 404 错误。因此，如果有一种方法可以完全停止注入但仍然构建实际的捆绑文件，那就太好了。

【问题讨论】：

标签： javascript wordpress vue.js vue-cli

【解决方案1】：

您可以通过在 HTML Webpack Plugin 选项中禁用注入来做到这一点。将以下内容添加到您的 vue.config.js 文件中。

  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].inject = false

      return args
    })
  }

【讨论】：