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

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

更新 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) 时，注释会被完全删除并且所有内容都被最小化。

如何保存我的评论？

解决方法

在我的 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>
<% } %>

,

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

• 用于非转义插值；
• 用于 HTML 转义插值； ??这个
• 用于 JavaScript 控制流。

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

所以你的 index.html 变成：

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