vue打包后在DevTools中显示版本以及打包时间私有化部署项目多起来后，没个用户代码版本不一致，排查bug时候无的放

显示打包时间

了解Vue Cli插值

因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容：

<%= VALUE %> 用来做不转义插值；

<%- VALUE %> 用来做 HTML 转义插值；

<% expression %> 用来描述 JavaScript 流程控制。除了被html-webpack-plugin暴露的默认值之外，所有客户端环境变量也可以直接使用。

了解了插值，明白了要怎么往index.html插入变量（VALUE就是变量），那这个变量什么时候暴露出来呢？
我们可以借助环境变量。

设置环境变量

同样阅读Vue Cli文档可知，vue cli项目在不同环境是怎么写入环境变量的，是从根目录的.env.xxx文件定义，并可通过process.env.xxx给这个变量赋值。

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

若是要显示打包时间的话，那么就新建一个.env.production文件，并设置变量（变量名要符合VUE_APP_XX规范）

# .env.production
VUE_APP_BUILD='build time'

赋值并插入html中

环境变量可通过 process.env 访问并赋值

// vue.config.js中
// 获取并格式化时间, 这里可以借助toLocaleString，或者moment,day
// toLocaleString
const time = new Date().toLocaleString('zh', { hour12: false }) // '2021/9/14 06:59:08'
// moment
const moment = require('moment')
const time = moment().format('YYYY.MM.DD HH:mm:ss')

process.env.VUE_APP_BUILD = time

//ps，比较坑的是 部署的服务器时间不是东八区时间，因此得设置偏移量，拿到东八区时间
const time = moment()
  .utcOffset(8)
  .format('YYYY.MM.DD HH:mm:ss')

在index.html中插入此值

如果出现该注释被删掉了的情况，那就在vue.config.js中设置html中不删除注释节点

const isProduction = process.env.NODE_ENV === 'production'
chainWebpack: config => {
	config.when(isProduction, config => {
  	config.plugin('html').tap(args => {
      args[0].minify.removeComments = false
      return args
    })
  }
}

总结

除此之外，version版本号可以通过package.json中获取,如 const packageInfo =require('./package.json') packageInfo.version 而后加入插值的全局变量中，
私有化部署的时候，感觉这东西还是挺具有参考意义的，因为有时候得直观了解用户当前使用的是哪个版本的代码。请各位dalao参阅~

参考

Vue CLI