在 Vue CLI 中进行构建时，如何向 index.html 添加 HTML 注释？

Question

更新 1：修复了导致我的初始构建错误的语法问题。

更新 2：使用 Webpack 插件找到了我自己的解决方案。查看已接受的解决方案。

我想在构建期间在 public/index.html 中添加一些自定义 HTML 注释。我添加了这样的内容：

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

在我的 vue.config.js 中，我相应地设置了 VUE_APP_VERSION 和 VUE_APP_BUILD_DATE：

let today = new Date().toLocaleDateString(undefined, {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
})

process.env.VUE_APP_VERSION = require('./package.json').version
process.env.VUE_APP_BUILD_DATE = today

但是当我实际构建（npm run build）时，注释被完全删除并且所有内容都最小化了。

如何保留我的评论？

Answer 1

我能够通过使用“HTML-转义插值”语法来实现它。

<%= VALUE %> 用于非转义插值；
<%- VALUE %> 用于 HTML-转义插值；这个
<% expression %> 用于 JavaScript 控制流。

还要注意不同的结束标记。

所以你的 index.html 变成：

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

Answer 2

在我的 vue.config.js 文件中找到了使用 HtmlWebpackPlugin 和 WebpackAutoInject 插件的解决方案；在我的 index.html 中放弃 VUE_APP_* 变量使用，因为它导致我构建错误。

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>
<% } %>

在 Vue CLI 中进行构建时，如何向 index.html 添加 HTML 注释？

How to add HTML comments to index.html when doing a build in Vue CLI?

build

environment-variables

vue.js

vue-cli-4