打包的时候给每个打包文件后面加一个时间戳，通过vue.config.js配置
const path = require('path')
const webpack = require('webpack')
const timeStamp = new Date().getTime()
module.exports = {
publicPath: './',
// 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
filenameHashing: false,
// 将构建好的文件输出到哪里
outputDir: 'dist',
configureWebpack: { // 重点
// 输出重构 打包编译后的js文件名称,添加时间戳.
output: {
filename: `js/[name].${timeStamp}.js`,
chunkFilename: `js/chunk.[id].${timeStamp}.js`,
}
},
css: { //重点.
extract: { // 打包后css文件名称添加时间戳
filename: `css/[name].${timeStamp}.css`,
chunkFilename: `css/chunk.[id].${timeStamp}.css`,
}
}
}
- 这样可以解决问题，每次打包发布之后， 项目不需要强制清理缓存就可以试试更新内容了。
- 但是这时候又有一个新问题产生。
- 就是这样打包完发布之后， 因为每次的文件名不一样，项目中偶尔会报错ChunkLoadError: Loading chunk failed。原因就是浏览器取的是缓存中的文件名称，新打包之后，文件名称改变，导致浏览器找不到文件了404。需要刷新页面，重新加载文件。
先说一下单独解决这个问题的方法
// 在main.js中
/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if (isChunkLoadFailed) {
// 用路由的replace方法，
// 并没有相当于F5刷新页面，
// 失败的js文件并没有从新请求，
// 会导致一直尝试replace页面导致死循环，
// 而用 location.reload 方法，相当于触发F5刷新页面，
// 虽然用户体验上来说会有刷新加载察觉，但不会导致页面卡死及死循环，
// 从而曲线救国解决该问题
window.location.reload();
// router.replace(targetPath);
} else {
console.log('no')
}
});
- 当捕获到Loading chunk {n} failed的错误时我们重新渲染目标页面，这种实现明显更简单和友好。
结合我们上面的问题，想到了一个新的解决方式，在打包的时候，文件名称不变，使用版本号。这样也可以实现每次打包发布后不需要强制清理缓存，又不会出现找不到文件的情况
- 在vue.config.js中，将name.timeStamp.js 改成 name.js?v=timeStamp
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
output: {
filename: `js/[name].js?v=${timeStamp}`,
chunkFilename: `js/chunk.[id].js?v=${timeStamp}`,
}
},
css: {
extract: {
filename: `css/[name].css?v=${timeStamp}`,
chunkFilename: `css/chunk.[id].css?v=${timeStamp}`,
}
},
这样就可以啦！！！
