当前位置：首页 > news >正文

vue2 打包时增加时间戳防止浏览器缓存，打包后文件进行 js、css 压缩

news 来源：原创 2025/9/21 4:32:01

文章目录

前言
一、什么是浏览器缓存
二、展示效果
三、vue.config.js 代码
四、代码压缩部分服务器不支持
五、感谢

前言

vue 开发过程中，项目前端代码需要更新，更新后由于浏览器缓存导致代码没有及时更新所产生错误，所以在打包时增加时间戳防止浏览器缓存。还有另一个好处是增加时间戳可以看到是什么时间打包的代码，防止运维偷懒 没更新甩锅。

一、什么是浏览器缓存

浏览器缓存 是指浏览器将网站资源（如图片、CSS、JS等文件）保存在本地，以便在用户再次访问同一网站时可以更快地加载页面。浏览器缓存可以分为强缓存和协商缓存两种类型。强缓存是浏览器直接从本地缓存中读取资源，而不向服务器发送请求，从而加快页面加载速度。协商缓存则是在强缓存失效时浏览器向服务器发起请求，服务器会验证资源的最新状态，并返回给浏览器是否可以使用缓存的响应。

二、展示效果

打开 F12 进入 Sources 打开项目中的 static 文件中的 css 或者 js 就可以看到每个文件后面都有一个时间戳如： app.20240912143942.js 就是 2024年9月12日打包的代码。
在这里插入图片描述

三、vue.config.js 代码

压缩打包文件；
js 文件和 css 文件增加时间戳；


const CompressionPlugin = require("compression-webpack-plugin");
const version = dateFormat(new Date(),"yyyyMMddHHmmss");// 本地服务接口地址
let target = "http://192.168.1.249", // 代理服务
module.exports = {//开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理devServer: {port: 2890,proxy: {"/api": {target,// 远程演示服务地址,可用于直接启动项目ws: true, // 代理 websockets，配置这个参数pathRewrite: {"^/api": "",},},"/blade-wwnetservice": { // 第三方接口调用接口target: "http://192.168.1.249:1888"},},},//路径前缀publicPath: "./",outputDir: "dist",assetsDir: "static",lintOnSave: false, // 是否开启eslint保存检测productionSourceMap: false, // 不会生成.map文件减小体积transpileDependencies: ["axios","vuex","vue-router","element-ui","compression-webpack-plugin","babel-polyfill","classlist-polyfill","vue",],chainWebpack: config => {//忽略的打包文件config.externals({"vue": "Vue","vue-router": "VueRouter","vuex": "Vuex","axios": "axios","element-ui": "ELEMENT"});const entry = config.entry("app");entry.add("babel-polyfill").end(); //es6=>es5entry.add("classlist-polyfill").end();// entry.add('@/mock').end();// 开启js、css压缩if (process.env.NODE_ENV === "production") {config.plugin("compressionPlugin").use(new CompressionPlugin({test: /\.js$|\.css/, // 匹配文件名threshold: 10240, // 对超过10k的数据压缩deleteOriginalAssets: true // 不删除源文件}));}},configureWebpack: config => {// 生产环境取消 console.logif (process.env.NODE_ENV === "production") {config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;// 为了浏览器不缓存静态资源，增加时间戳;config.output.filename= 'static/js/[name].'+version+'.js';config.output.chunkFilename= 'static/js/[name].'+version+'.js';} else {config.devtool = "source-map";}},css: {extract: { // 打包后css文件名称添加时间戳filename: `static/css/[name].${version}.css`,chunkFilename: `static/css/chunk.[id].${version}.css`,ignoreOrder: true, // 编译时忽略排序}},
};function dateFormat(date, format) {format = format || 'yyyy-MM-dd HH:mm:ss';if (date !== 'Invalid Date') {let o = {"M+": date.getMonth() + 1, //month"d+": date.getDate(), //day"H+": date.getHours(), //hour"m+": date.getMinutes(), //minute"s+": date.getSeconds(), //second"q+": Math.floor((date.getMonth() + 3) / 3), //quarter"S": date.getMilliseconds() //millisecond}if (/(y+)/.test(format)) format = format.replace(RegExp.$1,(date.getFullYear() + "").substr(4 - RegExp.$1.length));for (let k in o){if (new RegExp("(" + k + ")").test(format)){format = format.replace(RegExp.$1,RegExp.$1.length === 1 ? o[k] :("00" + o[k]).substr(("" + o[k]).length));}}return format;}return '';
}

四、代码压缩部分服务器不支持

所以需要将这段代码注释或者删除。

// 开启js、css压缩
if (process.env.NODE_ENV === "production") {config.plugin("compressionPlugin").use(new CompressionPlugin({test: /\.js$|\.css/, // 匹配文件名threshold: 10240, // 对超过10k的数据压缩deleteOriginalAssets: true // 不删除源文件}));
}

五、感谢

如果觉得有用欢迎点赞关注收藏。
有问题私信我！！~~