項(xiàng)目是webpack搭建的每次發(fā)步到線上，經(jīng)常需要手動(dòng)清楚瀏覽器緩存才能有效果。vue項(xiàng)目設(shè)置在最下面
項(xiàng)目打包的js（css也是一致）名稱都采用哈希值
問題：哈希值在有些情況下打包會(huì)不變，導(dǎo)致瀏覽器使用自己緩存的資源
解決：每次打包出來增加時(shí)間戳每次打包后的js名稱都不一致
- 1.js處理 每個(gè)項(xiàng)目的打包邏輯都不一樣，根據(jù)package.json中的打包指令找到執(zhí)行的文件修改 static是本地靜態(tài)資源的文件夾
let time = new Date().getTime()
output: {
path: config.build.assetsRoot,
filename: `static/js/[name].[chunkhash:8].${time}.js`,
chunkFilename:`static/js/[name].[chunkhash:8].${time}.js`
},
- 2.css處理 可以使用css分離插件 MiniCssExtractPlugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins:[
new MiniCssExtractPlugin({
filename: `static/css/[name].[contenthash:8].${time}.css`,
chunkFilename: `static/css/[name].[contenthash:8].${time}.css`,
}),
]
打包結(jié)果
測(cè)試
打開線上環(huán)境 發(fā)現(xiàn)資源是緩存的 從network
然后我們發(fā)布下
文章來源：http://www.zghlxwxcb.cn/news/detail-563181.html
vue項(xiàng)目處理其實(shí)一樣，改打包輸出的名字
vue.config.js文章來源地址http://www.zghlxwxcb.cn/news/detail-563181.html
time 時(shí)間戳
module.exports = {
configureWebpack: {
output: {
filename: `js/[name].${time}.js`,
chunkFilename: `js/[name].${time}.js`,
},
},
chainWebpack: config => {
config.plugins.delete("prefetch");
config.plugin("extract-css").tap((args) => [
{
filename: `css/[name].${time}.css`,
chunkFilename: `css/[name].${time}.css`,
},
]);
}
}
到了這里，關(guān)于webpack項(xiàng)目和vue項(xiàng)目發(fā)布，瀏覽器存在緩存的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
