現(xiàn)象:
我替換了圖片之后, 在進(jìn)行打包, 過后瀏覽器顯示的還是之前的畫面, 或者空白, 需要清空下緩存才能看到最新的頁面
原因: 默認(rèn)是用的hash模式打包, 主要是圖片的緩存問題
進(jìn)行 npm run build 之后
image.png
打包后的文件: name+ hash
image.png
如果是一樣的圖片, 那么打包后的名稱是一樣的, 所以會有緩存問題
想要的效果:
每次打包后, 得到的都是最新的頁面, 不要緩存, 讓用戶重新加載, 因此想到了時間戳的方式, 給每個打包后的問題取名 name+時間戳, 這樣就能保證每次打包后的文件都是新的, 不會出現(xiàn)緩存問題
類似下面這樣
image.png
出現(xiàn)新的問題:
如果我在兩個文件夾里面 弄一樣的文件名稱, 那么打包后會覆蓋掉,
比如這里的actJH_share1 ... 2,3,4 這四張圖片, 和demo文件夾的命名是一樣的, 打包后會覆蓋, 即使兩張actJH_share1 是不一樣的, 打包后依然只有一樣圖片
image.png
image.png
想要的效果:
不同路徑下的同一名稱圖片應(yīng)該算多張而不是一張
image.png
解決方式:
vue.config.js 如下配置即可實(shí)現(xiàn)想要的效果, name+hash:7+時間戳, 保證每次打包所有的文件都會進(jìn)行更新, 而不會去讀取緩存數(shù)據(jù)
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 目錄根據(jù)自己打包情況來定,我使用的就沒有static一層,所以直接去掉static即可乍狐。根據(jù)自己項目決定
chunkFilename: `static/css/[name].${Version}.css`
}
},
configureWebpack: {
output: { // 輸出重構(gòu) 打包編譯后的 文件名稱 【模塊名稱.版本號.時間戳】
// 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
})
}
}
