景象形容
新发了一版代码
产品:“火狐没更新”
我:“多刷新几次”
产品:“没用”
我:“强刷”
产品:“好棒棒,然而你之前不是写了一个版本检测,能自动更新吗,为什么这次不论用,还要手动强刷,一般刷新不论用”
我心田:"女人就是麻烦" 于是看了下复现的环境,发现了震惊的一幕
HTML代码长这样
我心田:绝不可能,相对不可能,啊,我的世界观崩塌了。要么全是webpakc打包的新版代码,要么走缓存全是老版代码。为啥能呈现一个html一半是新版一半是老版代码的状况???
马桶上的思考
思考过程
苦思好久,没有脉络
首先 有新版控制代码 Html肯定是新的
然而为啥有老版代码呢 我认真有看了下本地打包后的代码,终于发现了端倪
因为vue有按需加载 每个路由的css js 都是动静引入的,当初引入的是老版本的。所以这个文件应该是老版的,
留神红框的文件,走的缓存,然而打包进去的还是新版的,然而因为名字没有Hash,所以获取的是缓存的文件
验证
那么问题来了,vue-cli4为什么没问题呢
vue-cli-service inspect > output.js 一下
能够发现
// vue-cli5 output: { filename: 'js/[name].js', chunkFilename: 'js/[name].js' }//vue-cli4 output: { filename: 'js/[name].[contenthash:8].js', }
所以vue-cli5默认打包不带hash 就会造成缓存问题。
而火狐的缓存问题尤为重大。必须强行清缓存。
所以解决方案
1.window.reload ==> window.reload(true)
2.vue.config.js外面的添上
configureWebpack: { output: { filename: 'js/[name].[contenthash:8].js', }}
后续
上完fix版 完满解决问题
产品: 棒棒哒!