Show packing time

To understandVue Cli interpolation

Since the index file is used as a template, you can insert content using the Lodash template syntax:

  • <%= VALUE %> used to do unescaped interpolation;
  • <% -value %> is used to do HTML escape interpolation;
  • <% expression %> describes JavaScript flow control.

In addition to the default values exposed by the HTML-webpack-plugin, all client-side environment variables can also be used directly.

Now that you know how to insert a variable into index.html (VALUE is a variable), when will that variable be exposed? We can use environment variables.

Setting environment Variables

Also read the Vue Cli documentation to see how Vue Cli projects write environment variables in different environments, defined from the.env. XXX file in the root directory, and assigned to the variable through process.env.xxx.

.env                Load in all environments
.env.local          # is loaded in all environments, but ignored by Git
.env.[mode]         Is loaded only in the specified mode
.env.[mode].local   # is only loaded in the specified mode, but is ignored by Git
Copy the code

To display the packaging time, create a.env.production file and set the variable (the variable name should conform to the VUE_APP_XX specification)

# .env.production
VUE_APP_BUILD='build time'
Copy the code

Assign and insert into HTML

Environment variables can be accessed and assigned via process.env

/ / the vue. Config. Js
// Get and format the time, using toLocaleString or 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

// set the offset to the east 8 zone time
const time = moment()
  .utcOffset(8)
  .format('YYYY.MM.DD HH:mm:ss')
Copy the code

inindex.htmlInsert this value into



In case the comment is deleted, thevue.config.jsSet HTML not to remove comment nodes

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
    })
  }
}
Copy the code

conclusion

Json const packageInfo =require(‘./package.json’) packageinfo.version is added to interpolated global variables. This can be useful for privatized deployments, as it is sometimes necessary to intuitively know which version of the code the user is currently using. Dalao please refer to ~

reference

Vue CLI