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

---

前言

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

---

一、什么是浏览器缓存

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

二、展示效果

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

三、vue.config.js 代码

1. 压缩打包文件；
2. 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",