Embed script only on production with Vue CLI 3

Question

My main goal is to inject a tag into my index.html only in production (it's a New Relic monitoring code snippet).

My Vue.js is built and served as a static resource, so using {% %} tags to surround the script block with a condition doesn't seem to work in this use case.

So I tried to add the New Relic code snippet on my Vue.js app using html-webpack-plugin, since I found a simple Webpack plugin using on html-webpack-plugin. It's a pretty simple plugin, it just create the node and pushes it in the page body : https://github.com/robrap/html-webpack-new-relic-plugin/blob/master/src/index.js#L25

I register the plugin by setting my vue.config.js this way (I first tried to add the script no matter the environment) :

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})
    ]
  }
}

The plugin actually does its job well (the code snippet is injected), but its execution messes up with Vue CLI default configuration.

Some stylesheets and scripts aren't referenced anymore in the final index.html file, the <div id=app></div> is not there anymore, the app is broken.

I don't know if using HtmlWebpackPlugin is a dead end, but I currently don't know any other way to reach my goal.

Has anyone an idea on how I could make this work ?

Thanks a lot to anyone passing by.

EDIT : The plugin I was trying to use seemed to be flawed, I had to modify it to make it work with Vue CLI. My main problem has been solved by the selected answer.

Michal Levý Michal Levý · Accepted Answer · 2021-01-08T20:30:34

vue.config.js option configureWebpack just merges the options you provide to a webpack config provided by Vue CLI. So by using your code, you are running 2 distinct HtmlWebpackPlugins (one from your config and one default from Vue CLI)

Try this instead:

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

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

Embed script only on production with Vue CLI 3

1 Answers