前言：vue项目打包发布后，由于缓存可能不能及时刷新最新的代码，为了解决这个问题，可以在打包编译时给文件添加版本后缀。
以下为未添加版本时一般 npm run build 打包后的dist/static/js文件
dist/static/js 未加版本
vue-cli2
接下来开始给打包文件添加版本。
在build/webpack.prod.conf.js文件中。
//定义版本 这是使用当前时间数 当然也可以自定义版本1.0等
const Version = new Date().getTime();
//找到并修改以下代码
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'.js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'.js')
}
接下来我们再次npm run build编译打包，查看打包后文件。
dist/static/js 加入版本后
vue-cli3
vue-cli3中默认创建时没有配置文件，需要手动添加文件，在项目根目录（即package.json同级）创建vue.config.js配置文件。
加入以下代码，效果同上：
//vue.config.js
//定义版本 这是使用当前时间数 当然也可以自定义版本1.0等
const Version = new Date().getTime();
module.exports = {
// webpack配置
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 给js和css配置版本号
config.output.filename('js/[name].[chunkhash].' + Version + '.js').end();
config.output.chunkFilename('js/[name].[chunkhash].' + Version + '.js').end();
config.plugin('extract-css').tap(args => [{
filename: `css/[name].[chunkhash].${Version}.css`,
chunkFilename: `css/[name].[chunkhash].${Version}.css`
}])
}
}
}
结语
打包后的文件名末尾添加了版本后缀，可以有效的解决发布后因为缓存，不能及时更新代码的困扰啦。
如果帮助到你的话记得点个赞，欢迎大家交流探讨 ^ _ ^
