前言：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`
            }])
        }
    }
}

结语

打包后的文件名末尾添加了版本后缀，可以有效的解决发布后因为缓存，不能及时更新代码的困扰啦。

如果帮助到你的话记得点个赞，欢迎大家交流探讨 ^ _ ^