本人菜鸟最近在做一个项目发现打包上线后不能自动更新页面，每次都要浏览器开启隐私模式或者强清缓存才能更新。最近有空了对该bug进行排查才发现原因是打包后的文件名不含hash。以下几点是解决方法贴出解决前、后的打包图：
遇事不对先百度“项目打包发布后浏览器缓存”给出如下方法解决
- 在packge.json文件改变版本号
在config.js文件里面导入version并配置输出文件名跟上版本号这样执行打包命令之后确实看到静态资源文件名变更那么页面会加载新的资源不会去缓存取，一个公司有多个构建环境比如develop、standard等等开发频繁修改bug后不可能每次发布一版都手动去更改版本号
const { version } = require('./package.json')
module.exports = {
configureWebpack: {
output: {
// 修改输出js目录名及文件名
filename: `static/js/[name]-${version}.js`,
chunkFilename: `static/js/[name]-${version}.js`,
},
},
}
- 由此我又联想到给输出的版本号改成时间戳是不是每次指向的资源就是最新的，这样是可以解决问题的。但联想到其它项目上线都没有产生此问题，看资料才发现webpack打包每次会自动生成hash，一看我的线上项目所有的静态资源都没有产生hash，打包后的文件名都是一样的。说明我的打包就有问题，就有了解决方式3。
const timestamp = new Date().getTime()
module.exports = {
configureWebpack: {
output: {
// 修改输出js目录名及文件名
filename: `static/js/[name]-${timestamp}.js`,
chunkFilename: `static/js/[name]-${timestamp}.js`,
},
},
}
- 查看vue cli指南发现如果打包环境是env的则不会产生hash值，立刻查看项目中的打包命令发现前同事是自定义了一个环境配置，并且没有在该文件中定义NODE_ENV=production导致打包出来的文件不会产生hash。赶紧在文件下加上环境指定命令，再次重新打包得到了预期结果。到此才算把问题解决了。
