仅在使用 Vue CLI 3 的生产环境中嵌入脚本

Question

我的主要目标是仅在生产中将标签注入到我的 index.html 中（这是一个 New Relic 监控代码 sn-p）。

我的 Vue.js 是构建并用作静态资源的，因此在此用例中使用 {% %} 标记将脚本块包围起来似乎不起作用。

所以我尝试使用 html-webpack-plugin 在我的 Vue.js 应用程序上添加 New Relic 代码 sn-p，因为我在 html-webpack-plugin 上找到了一个简单的 Webpack 插件。这是一个非常简单的插件，它只是创建节点并将其推送到页面正文中：https://github.com/robrap/html-webpack-new-relic-plugin/blob/master/src/index.js#L25

我通过这种方式设置我的vue.config.js 来注册插件（我首先尝试添加脚本，无论环境如何）：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackNewRelicPlugin = require('@yodatech/html-webpack-new-relic-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin(),
      new HtmlWebpackNewRelicPlugin({the plugin options})
    ]
  }
}

该插件实际上很好地完成了它的工作（代码 sn-p 被注入），但它的执行与 Vue CLI 默认配置相混淆。

最终 index.html 文件中不再引用某些样式表和脚本，<div id=app></div> 不再存在，应用程序已损坏。

我不知道使用 HtmlWebpackPlugin 是不是死路一条，但我目前不知道有什么其他方法可以达到我的目标。

有没有人知道我怎样才能完成这项工作？

非常感谢路过的人。

编辑：我尝试使用的插件似乎有缺陷，我必须对其进行修改以使其与 Vue CLI 一起使用。我的主要问题已通过所选答案解决。

Answer 1

vue.config.js 选项 configureWebpack 只是 merges the options 您提供给 Vue CLI 提供的 webpack 配置。因此，通过使用您的代码，您将运行 2 个不同的 HtmlWebpackPlugins（一个来自您的配置，另一个来自 Vue CLI）

试试这个：

var HtmlWebpackNewRelicPlugin = require('@yodatech/html-webpack-new-relic-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackNewRelicPlugin({the plugin options})
    ]
  }
}