使用vue，版本更新，解决用户浏览器缓存问题

「爱情、让人受尽委屈。」 2021-09-02 07:00 545阅读 0赞

1、修改 `webpack .prod.conf.js` 文件

const version = new Date().getTime();
    output: {
    	path: config.build.assetsRoot,
    	filename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js'),
    	chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js')
    }

*  2、在 html 页面前面加 meta 标签。

<meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

*  3、html 页面加载脚本的时候给脚本后面加一个时间戳，修改 `webpack.prod.conf.js` 文件。

const version = new Date().getTime();
    new HtmlWebpackPlugin({
    	filename: config.build.index,
    	template: 'index.html',
    	inject: true,
    	hash: version,
    	favicon: resolve('icon.ico'),
    	title: 'vue-admin-template',
    	minify: {
    		removeComments: true,
    		collapseWhitespace: true,
    		removeAttributeQuotes: true
    	}
    })

*

> vue-cli 里的默认配置，css 和 js 的名字都加了哈希值，所以新版本 css、js 和就旧版本的名字是不同的，不会有缓存问题。但是 index.html 放到服务器里去的时候，index.html 在服务器端可能是有缓存的，这需要在服务器配置不让缓存 index.html。

4、nginx 配置，让 index.html 不缓存，让运维设置。

location = /index.html {
        add_header Cache-Control "no-cache, no-store";
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，545人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器之缓存系列--解决css或js修改后浏览器缓存不更新的问题

原文网址：[浏览器之缓存系列--解决css或js修改后浏览器缓存不更新的问题\_IT利刃出鞘的博客-CSDN博客][--_css_js_IT_-CSDN] 简介说明

Bertha 。/ 2024年03月30日 13:25/ 0 赞/ 205 阅读

相关解决chrome浏览器图标缓存问题

一、先解决图标缓存问题尝试解决清空浏览器缓存，无效直接访问图片地址，无效删除本地favicon缓存文件，有效 C:\\Users\\xxxxxx\

亦凉/ 2023年10月06日 10:23/ 0 赞/ 165 阅读

相关 vue 微信浏览器缓存问题解决方案

1. 试过js、css打包时添加时间戳，因为打包后每次都是新名字的文件，所以感觉加不加时间戳都没有效果试了一下果然原因应该是微信浏览器缓存了index.html, 所以打

àì夳堔傛蜴生んèń/ 2023年02月28日 11:26/ 0 赞/ 24 阅读

相关 js代码更新浏览器缓存问题

代码更新之后，浏览器打开页面发现代码还是之前的解决办法：在加载js时 url后边拼接上当前时间戳 <script type='text/javascrip

迈不过友情╰/ 2023年02月27日 05:51/ 0 赞/ 116 阅读

相关 vue中使用babel-polyfill解决低版本浏览器不兼容问题

vue中使用babel-polyfill解决低版本浏览器不兼容问题参考文章： [（1）vue中使用babel-polyfill解决低版本浏览器不兼容问题][1_vue_b

r囧r小猫/ 2023年02月21日 11:34/ 0 赞/ 141 阅读

相关 IE浏览器缓存问题解决方法整理

一、IE浏览器缓存的内容分析：　　IE浏览器会缓存网页中的GET和XHR的内容，并且在IE浏览器中如果请求方式是get方式的话，IE浏览器会进行识别，如果该get请求的ur

男娘i/ 2023年02月15日 12:57/ 0 赞/ 29 阅读

相关浏览器缓存问题

转：https://blog.csdn.net/albertfly/article/details/52678406 可以在请求的JS后面加随机数Math.random()或

快来打我*/ 2022年05月26日 10:46/ 0 赞/ 294 阅读

相关解决js文件被浏览器缓存问题

1、加版本号<script type="text/javascript" src="/js/common.js?v=1" ></script> 2、加发布时间<script

妖狐艹你老母/ 2022年05月26日 07:21/ 0 赞/ 573 阅读

相关图片在浏览器缓存问题解决

<meta http-equiv="Pragma" content="no-cache" /> <style type="text/css"> im

今天药忘吃喽~/ 2022年03月28日 10:58/ 0 赞/ 389 阅读

相关使用vue，版本更新，解决用户浏览器缓存问题

1、修改 `webpack .prod.conf.js` 文件 const version = new Date().getTime(); output: {

「爱情、让人受尽委屈。」/ 2021年09月02日 07:00/ 0 赞/ 546 阅读