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

diaojw090

于 2020-08-13 09:08:36 发布

阅读量1.3k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/diaojw090/article/details/107971805

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Vue项目的vue.config.js中配置Webpack，通过添加时间戳到输出的JS文件名，实现缓存控制和版本管理。具体操作包括定义时间戳变量并在Webpack配置中使用，以确保每次构建的文件具有唯一标识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

在 vue.config.js 的文件中加入下面这段话

// vue.config.js
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`
    },
  },
...
}