文章讲述了如何在前端开发中通过在打包后的JavaScript和CSS文件名中添加时间戳，促使用户刷新页面时获取最新的代码，避免因浏览器缓存导致的问题，方法涉及修改vue.config.js和HTML文件设置。
有时前端代码上线后，用户无法获取最新的代码显示，需要清除浏览器缓存，比较麻烦。
我们可以通过给打包编译后的js文件、css文件名称添加时间戳来达到用户刷新时重新获取最新的js、css文件，进而获得最新代码
vue.config.js 文件
let timeStamp = new Date().getTime();
module.exports = {
filenameHashing: false,
configureWebpack: {
output: {
// 输出重构 打包编译后的js文件名称,添加时间戳.
filename: `js/js[name].${timeStamp}.js`,
chunkFilename: `js/chunk.[id].${timeStamp}.js`,
},
},
css: {
extract: {
// 打包后css文件名称添加时间戳
filename: `css/[name].${timeStamp}.css`,
chunkFilename: `css/chunk.[id].${timeStamp}.css`,
},
},
}public/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
</html>
1718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
