Vue项目自动设置版本号，版本号变更清空缓存

需求

项目中在cookie和localStorage中，存储了不少信息，希望每次发布后能清空cookie和localStorage，避免缓存和版本不一致带来的影响。

方式一

1. 自定义webpack的plugin，在afterPlugins钩子函数中修改package.json文件版本号，使用当前时间作为版本号
2. 在main.js中读取package.json文件，判断当前版本号是否和localStorage中的版本号是否一致。若不一致，清空localStorage
3. 将当前版本号存入localStorage

vue.consig.js中定义插件

chainWebpack: config => {
  const VersionPlugin = require('./src/versionPlugin')
  config.plugin('version').use(VersionPlugin).tap(args => {
    return args
  })
}

versionPlugin读取package.json修改版本号

const fs = require('fs')
const path = require('path')
const sep = path.sep

function VersionPlugin (options) {
  this.options = options || {}
}

VersionPlugin.prototype.apply = function (compiler) {
  var self = this
  compiler.plugin('afterPlugins', function (params) {
    const packageJsonPath = path.join(params.context, sep + 'package.json')
    const dateStr = getDateStr()
    let packageJsonStr = fs.readFileSync(packageJsonPath, 'utf8')
    const r = new RegExp('(?<=version\\":\\s*\\")(.*)(?=")')
    packageJsonStr = packageJsonStr.replace(r, "1.0." + dateStr)
    fs.writeFileSync(packageJsonPath, packageJsonStr, 'utf8')
  })
}
function getDateStr () {
  const now = new Date()
  return now.getFullYear() + format(now.getMonth() + 1) + format(now.getDate()) + format(now.getHours()) + format(now.getMinutes())
  function format (num) {
    return num < 10 ? '0' + num : '' + num
  }
}

module.exports = VersionPlugin

在main.js中读取package.json判断版本号是否一致

import packageJson from '../package.json'
import cookie from './util/cookie'

const version = packageJson.version
const localVersion = localStorage.getItem('projectVersion')
if (!localVersion || version !== localVersion) {
  localStorage.clear()
  cookie.remove('jwt')
  localStorage.setItem('projectVersion', version)
}

方式二

使用webpack.DefinePlugin插件将参数传入全局环境变量process.env，vue已默认集成DefinePlugin插件

1. 配置webpack.DefinePlugin插件，使用当前时间作为版本号，传入process.env
2. 在main.js中读取全局变量process.env，判断当前版本号是否和localStorage中的版本号是否一致。若不一致，清空localStorage
3. 将当前版本号存入localStorage

vue.consig.js中使用DefinePlugin插件，vuecli3中已默认集成此插件，config.plugin('define')来使用此使用

chainWebpack: config => {
  // 使用webpack.DefinePlugin
  config.plugin('define').tap(args => {
    args[0]['process.env'].VERSION = (function () {
      const now = new Date()
      return now.getFullYear() + format(now.getMonth() + 1) + format(now.getDate()) + format(now.getHours()) + format(now.getMinutes())
      function format (num) {
        return num < 10 ? '0' + num : '' + num
      }
    })()
    return args
  })
}

在main.js中读取全局变量process.env判断版本号是否一致

import cookie from './util/cookie'

const version = process.env.VERSION
const localVersion = localStorage.getItem('projectVersion')
if (!localVersion || version !== localVersion) {
  localStorage.clear()
  cookie.remove('jwt')
  localStorage.setItem('projectVersion', version)
}

结语

方式一需要新增自定义插件；方式二使用现成的插件，使用较为方便，通过webpack.DefinePlugin也可以给全局变量process.env定义其他参数