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

Question

我的主要目标是仅在生产环境中将标签注入我的 index.html（这是一个 New Relic 监控代码片段）。

我的 Vue.js 是作为静态资源构建和提供的，因此在这个用例中使用 {% %} 标记用条件包围脚本块似乎不起作用。

所以我尝试使用 html-webpack-plugin 在我的 Vue.js 应用程序中添加 New Relic 代码片段，因为我在 html-webpack 上找到了一个简单的 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})
    ]
  }
}

该插件实际上完成了它的工作（注入了代码片段），但它的执行与 Vue CLI 默认配置混淆了。

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

我不知道使用 HtmlWebpackPlugin 是否是死胡同，但我目前不知道还有什么其他方法可以达到我的目标。

有人知道我如何才能完成这项工作吗？

非常感谢任何路过的人。

编辑：我尝试使用的插件似乎有缺陷，我不得不修改它以使其与 Vue CLI 一起使用。我的主要问题已经被选择的答案解决了。

Answer 1

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

试试这个：

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

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

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

Embed script only on production with Vue CLI 3

vue.js

webpack-4