阅读 323

vue打包后在DevTools中显示版本以及打包时间

显示打包时间

image.png

了解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中插入此值
image.png
如果出现该注释被删掉了的情况,那就在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

文章分类
前端
文章标签