I have made a simple Vue app using the Vue CLI and now I want to add Google Tag Manager code in the head of the html conditionally only for the production build. I could do this with a server side language like php so I tried changing the index.html to index.php but when I build the project it outputs an index.html with the app injected and the index.php without the app injected in the dist folder. The php code also doesn't work with the webpack-dev-server in the vue cli.
How can I integrate some server side code (it doesn't have to be php) into the index of the vue app generated by the vue cli to conditionally add the tag manager code for the production build? I'm not sure how the vue cli build process is done. Can I tell it to use a different index.html for the production build?
Extra: I'm interested in knowing more about the vue cli build process. ex. There is no script tag in the template index.html so how does Vue inject itself into the index when building or using the webpack-dev-server?
I just saw in the vue cli documentation that the index.html page is processed by webpack. This means I can use lodash template syntax to easily add tags in the head only on production
<head>
...
<%= process.env.NODE_ENV === 'production' ? '<script>...</script>' : '' %>
...
</head>