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

「爱情、让人受尽委屈。」 2021-09-02 07:00 459阅读 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 条评论，459人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关浏览器缓存解决思路

> 思考方向：修改资源的地址名，对浏览器来说，就是一个全新的请求传统方式 > 原理：在【静态资源】后面加版本号 script(src="indexPage.

朱雀/ 2022年07月12日 07:39/ 0 赞/ 192 阅读

相关浏览器缓存解决思路

> 思考方向：修改资源的地址名，对浏览器来说，就是一个全新的请求传统方式 > 原理：在【静态资源】后面加版本号 script(src="indexPage.

蔚落/ 2022年07月12日 07:39/ 0 赞/ 190 阅读

相关浏览器缓存问题

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

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

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

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

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

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

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

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

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

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

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