1

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

如何保留我的评论？

4

2 回答 2

1

在我的文件中找到了使用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>
<% } %>
于 2020-12-29T19:48:02.003 回答
0

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

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

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

所以你的index.html变成：

<!--
My Application
Version: <%- VUE_APP_VERSION %>
Build date: <%- VUE_APP_BUILD_DATE %>
-->
于 2020-12-24T00:56:22.857 回答