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.sepfunctionVersionPlugin(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=newRegExp('(?<=version\\":\\s*\\")(.*)(?=")')
    packageJsonStr= packageJsonStr.replace(r,"1.0."+ dateStr)
    fs.writeFileSync(packageJsonPath, packageJsonStr,'utf8')})}functiongetDateStr(){const now=newDate()return now.getFullYear()+format(now.getMonth()+1)+format(now.getDate())+format(now.getHours())+format(now.getMinutes())functionformat(num){return num<10?'0'+ num:''+ num}}

module.exports= VersionPlugin

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

import packageJsonfrom'../package.json'import cookiefrom'./util/cookie'const version= packageJson.versionconst 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=newDate()return now.getFullYear()+format(now.getMonth()+1)+format(now.getDate())+format(now.getHours())+format(now.getMinutes())functionformat(num){return num<10?'0'+ num:''+ num}})()return args})}

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

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

结语

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