vue项目打包后浏览器缓存问题及解决

最新推荐文章于 2024-07-05 15:11:07 发布

超级罗伯特

最新推荐文章于 2024-07-05 15:11:07 发布

阅读量9.6k

点赞数 11

文章标签： vue.js 浏览器缓存前端优化

本文链接：https://blog.csdn.net/m0_68633804/article/details/131642270

版权

项目上线后，针对使用频繁的功能模块，比如请假，加班的新增以及编辑内容涉及到数据逻辑的处理的时候，你会发现浏览器缓存的问题非常的严峻，总不能一直告诉用户要清理缓存吧，这个时候前台开发人员就需要即使做优化，一个通常的处理的办法就通过时间戳解决。index.html文件在服务器端可能被缓存，css，js同样如此，以下是一种解决方案

第一步在修改public文件夹内index.html的内容

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <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">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>

第二步，修改vue.config.js文件

注意css配置项跟configureWebpack是并列关系

configureWebpack: {
    output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
      filename: `js/js[name].${timeStamp}.js`,
      chunkFilename: `js/chunk.[id].${timeStamp}.js`
    },
    // 关闭 webpack 的性能提示
    performance: {
      hints: false
    },
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  css: { // 重点.
    extract: { // 打包后css文件名称添加时间戳
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/chunk.[id].${timeStamp}.css`
    }
  },

第三步：修改nginx（nginx.conf中配置）中配置不缓存index文件的内容

if ($request_filename ~* ^.*?.(html|htm)$) {
		 add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
	 }

配置就完毕了，重新打包部署服务器即可。

超级罗伯特

关注

11
点赞
踩
42

收藏

觉得还不错? 一键收藏
打赏
9
评论
vue项目打包后浏览器缓存问题及解决

项目上线后，针对使用频繁的功能模块，比如请假，加班的新增以及编辑内容涉及到数据逻辑的处理的时候，你会发现浏览器缓存的问题非常的严峻，总不能一直告诉用户要清理缓存吧，这个时候前台开发人员就需要即使做优化，一个通常的处理的办法就通过时间戳解决。index.html文件在服务器端可能被缓存，css，js同样如此，以下是一种解决方案。第三步：修改nginx（nginx.conf中配置）中配置不缓存index文件的内容。第二步，修改vue.config.js文件。配置就完毕了，重新打包部署服务器即可。
复制链接

扫一扫