vue项目中限制浏览器缓存

最新推荐文章于 2024-03-23 17:52:13 发布

发渐稀

最新推荐文章于 2024-03-23 17:52:13 发布

阅读量1.6k

点赞数

分类专栏： vue2 文章标签： vue.js 缓存前端

本文链接：https://blog.csdn.net/qq_64760783/article/details/131644182

版权

vue2 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

方式一：

在 HTML 页面（如 index.html）的 <head> 标签中添加 meta 配置。

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

这段代码可以通过设置HTTP响应头的方式来控制浏览器缓存，相当于在每次请求时都强制浏览器重新获取资源，而不管之前是否缓存过。可以有效地避免浏览器缓存的影响，但是也会导致资源的重复下载和带宽浪费，因此应该谨慎使用。

方式二：

针对 Vue3 以下版本，在 vue.config.js 新增配置内容，将时间戳作为打包编译后的文件名称的一部分。

const Timestamp = new Date().getTime()
module.exports = {
  configureWebpack: {
    output: { // 输出重构，打包编译后的文件名称 【模块名称.版本号(可选).时间戳】
      filename: `[name].${Timestamp}.js`,
      chunkFilename: `[name].${Timestamp}.js`
    },
  },
  css: {
    extract: { // 打包后css文件名称添加时间戳
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`
    }
  },
}

发渐稀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue项目中限制浏览器缓存

的方式来控制浏览器缓存，相当于在每次请求时都强制浏览器重新获取资源，而不管之前是否缓存过。可以有效地避免浏览器缓存的影响，但是也会导致资源的重复下载和带宽浪费，因此应该谨慎使用。新增配置内容，将时间戳作为打包编译后的文件名称的一部分。针对 Vue3 以下版本，在。在 HTML 页面（如。
复制链接

扫一扫