vue cli3.x打包更新版本,浏览器缓存问题

Jsky
2021-09-14 08:11:18
前端
Vue

问题: 每次打包更新版本发到服务器上，导致偶尔会出现不能及时更新最新代码，浏览器存在缓存的问题。总不能让用户打开新的无痕窗口吧。

解决: 我们可以在打包的文件名中添加一个版本号以便浏览器能区分。

1.找到vue.config.js(vue cli3.x生成的项目默认没有这个文件,需要自己创建)

2.添加如下代码

// 时间戳保证不会版本重复
const Timestamp = new Date().getTime();
module.exports = {
  ....
  configureWebpack: { // webpack 配置
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
      chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
    },
  }
  ...
};

转载原文