Как добавить HTML-комментарии в index.html при сборке в Vue CLI?

Я смог заставить это работать, используя синтаксис интерполяции с экранированием HTML.

• <%= VALUE %> для неэкранированной интерполяции;
• <%- VALUE %> для интерполяции с экранированием HTML; 👈🏻 этот
• <% выражение %> для потоков управления JavaScript.

Обратите внимание и на другой закрывающий тег.

Таким образом, ваш index.html становится:

<!--
My Application
Version: <%- VUE_APP_VERSION %>
Build date: <%- VUE_APP_BUILD_DATE %>
-->

Нашел решение с помощью плагинов HtmlWebpackPlugin и WebpackAutoInject в моем vue.config.js файле; отказ от использования переменной VUE_APP_* в моем index.html, поскольку это вызывало у меня ошибки сборки.

npm install html-webpack-plugin --save-dev
npm install webpack-auto-inject-version --save-dev

Моя новая vue.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebpackAutoInject = require('webpack-auto-inject-version')

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? process.env.VUE_APP_PUBLIC_PATH_EN
    : '/',

  configureWebpack: {
    plugins: [
      // index.html customization
      new HtmlWebpackPlugin({
        template: 'public/index.html',
        filename: 'index.html',
        inject: true,
        deploy: process.env.VUE_APP_DEPLOY,
        webtrends: '/webtrends/scripts/webtrends.load.js', // include webtrends script for OPS only
        minify: {
          removeComments: false
        }
      }),

      // Auto inject version
      new WebpackAutoInject({
        SILENT: true,
        // options
        components: {
          AutoIncreaseVersion: false,
          InjectAsComment: false
        },
        componentsOptions: {
          InjectByTag: {
            // https://www.npmjs.com/package/dateformat
            dateFormat: 'isoUtcDateTime'
          }
        }
      })
    ]
  }
}

Затем в моем index.html (с пользовательским скриптом для включения в сборку):

<!--
My application
Version: [AIV]{version}[/AIV]
Build date: [AIV]{date}[/AIV]
-->
<% if (htmlWebpackPlugin.options.deploy === 'ops') { %>
    <script src = "<%= htmlWebpackPlugin.options.webtrends %>"></script>
<% } %>