现象:
我替换了图片之后, 在进行打包, 过后浏览器显示的还是之前的画面, 或者空白, 需要清空下缓存才能看到最新的页面
原因: 默认是用的hash模式打包, 主要是图片的缓存问题
进行 npm run build 之后
image.png
打包后的文件: name+ hash
image.png
如果是一样的图片, 那么打包后的名称是一样的, 所以会有缓存问题
想要的效果:
每次打包后, 得到的都是最新的页面, 不要缓存, 让用户重新加载, 因此想到了时间戳的方式, 给每个打包后的问题取名 name+时间戳, 这样就能保证每次打包后的文件都是新的, 不会出现缓存问题
类似下面这样
image.png
出现新的问题:
如果我在两个文件夹里面 弄一样的文件名称, 那么打包后会覆盖掉,
比如这里的actJH_share1 ... 2,3,4 这四张图片, 和demo文件夹的命名是一样的, 打包后会覆盖, 即使两张actJH_share1 是不一样的, 打包后依然只有一样图片
image.png
image.png
想要的效果:
不同路径下的同一名称图片应该算多张而不是一张
image.png
解决方式:
vue.config.js 如下配置即可实现想要的效果, name+hash:7+时间戳, 保证每次打包所有的文件都会进行更新, 而不会去读取缓存数据
const Version = new Date().getTime()
module.exports = {
publicPath: "./",
productionSourceMap: false,
/**
* 打包的时候解决缓存问题
*/
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: {
// 修改打包后css文件名 // css打包文件，添加时间戳
filename: `static/css/[name].${Version}.css`, // 此处static/css/xxx 目录根据自己打包情况来定,我使用的就没有static一层,所以直接去掉static即可。根据自己项目决定
chunkFilename: `static/css/[name].${Version}.css`
}
},
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
// filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
// chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
filename: `static/js/[name].${Version}.js`, // js打包文件，添加时间戳
chunkFilename: `static/js/[name].${Version}.js`
}
},
chainWebpack(config) {
// img的文件名修改 // img打包文件，添加时间戳
config.module
.rule('images')
.use('url-loader')
.tap(options => {
options.name = `static/img/[name][hash:7]${Version}.[ext]`
options.fallback = {
loader: 'file-loader',
options: {
name: `static/img/[name][hash:7]${Version}.[ext]`
}
}
return options
})
}
}
