需求
项目中在cookie和localStorage中,存储了不少信息,希望每次发布后能清空cookie和localStorage,避免缓存和版本不一致带来的影响。
方式一
- 自定义webpack的plugin,在afterPlugins钩子函数中修改package.json文件版本号,使用当前时间作为版本号
- 在main.js中读取package.json文件,判断当前版本号是否和localStorage中的版本号是否一致。若不一致,清空localStorage
- 将当前版本号存入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
插件
- 配置webpack.DefinePlugin插件,使用当前时间作为版本号,传入process.env
- 在main.js中读取全局变量process.env,判断当前版本号是否和localStorage中的版本号是否一致。若不一致,清空localStorage
- 将当前版本号存入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
定义其他参数
声明:本站所有文章,如无特殊说明或标注,均为网络收集发布。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。