每次打包更新版本发到服务器上,导致偶尔会出现不能即使更新最新代码,浏览器存在缓存的问题。

解决方法:找到webpack .prod.conf.js

1.定义版本变量: const  Version = new Date().getTime(); // 这里使用的是时间戳 来区分

output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].'+_Version+'js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+_Version+'js')
},

然后直接 npm run build 打包后 就可以看到dist 文件里的js 文件名带上里版本号

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

2、nginx 配置,让index.html不缓存

在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置。在常用的缓存设置里面有两种方式,都是使用add_header来设置:分别为Cache-Control和Pragma。

add_header Cache-Control no-store;
add_header Pragma no-cache;

no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200 
no-store浏览器不缓存,刷新页面需要重新下载页面

Vue打包文件放在服务器后,浏览器存在缓存问题的更多相关文章

  1. Vue打包文件放在服务器,浏览器存在缓存问题的解决

    在入口文件index.html添加 <meta http-equiv="pragram" content="no-cache"> <meta ...

  2. Vue 打包部署到服务器后,非主页刷新后出现404问题解决

    开心把项目部署到服务上,从头到尾点了一遍,发现没有问题,以为就可以大功告成,没想到刷新页面时出现 被破泼了一脸的凉水,更奇怪的事首页没有问题,只有其他页面出现,在调戏了很久的度娘后,才从坑里跳出来,以 ...

  3. nginx处理vue打包文件后的跨域问题

    起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...

  4. vue+ elementUI 打包发布到服务器后,element-icons.woff文件404

    vue项目打包部署到服务器,静态资源文件404 js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文 ...

  5. vue代码上传服务器后背景图片404解决方法

    问题:代码上传服务器后,图片404,使用的font-awesome图标也是404 解决办法: 如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin ...

  6. 使用node-static运行vue打包文件dist

    vue打包后的文件dist,如果想上线之前查看效果,方法如下: npm install -g node-static 进入到dist文件夹,运行static命令 打开上面地址

  7. vue 打包部署到服务器上 配置nginx访问

    坑一 css,js资源引入不正确 webpack配置文件config/index.js 需要更改: 方法一 当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根 ...

  8. Vue打包发布到Tomcat后,刷新报错404解决方法

    在应用下面加 WEB-INF 建 web.xml 内容如下 <?xml version="1.0" encoding="ISO-8859-1"?> ...

  9. Vue匿名组件使用keep-alive后动态清除缓存

    在使用Vue开发管理系统项目的时候,为了保存页面的浏览状态,我们可以使用内置组件keep-alive来缓存组件内部状态,避免重新渲染. <keep-alive> <router-vi ...

随机推荐

  1. 开发神技能 | Python Mock 的入门

    Mock是什么 Mock这个词在英语中有模拟的这个意思,因此我们可以猜测出这个库的主要功能是模拟一些东西.准确的说,Mock是Python中一个用于支持单元测试的库,它的主要功能是使用mock对象替代 ...

  2. linux实操_shell位置参数变量

    基本语法: 脚本内容: 输出效果:

  3. mysql 5.5 编码设置为utf8 转载自:http://outofcontrol.ca/thoughts/comments/change-mysql-5.5-default-character-set-to-utf8

    Change MySQL 5.5 default character-set to UTF8 连接里是linux下的 在window下my.ini Add under [client]  the fo ...

  4. 纯css实现树形结构

    纯css实现属性结构 **css实现属性结构的思路是利用伪类实现树形结构连接线,如果想实现点击展开和收 缩以及复选框效果还得配合js来实现.其实展开和收缩就是一个点击元素其子元素隐藏 和显示的切换.* ...

  5. ubuntu 服务器添加新磁盘

    原文 Linux系统扩容根目录磁盘空间的操作方法 这篇文章主要介绍了Linux系统扩容根目录磁盘空间的操作方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 一.使用背景 Linux根目录磁 ...

  6. [HNOI2009] 有趣的数列——卡特兰数与杨表

    [HNOI 2009] 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<…&l ...

  7. Appium自动化测试教程-自学网-monkey事件

    操作事件简介 Monkey所执行的随机事件流中包含11大事件,分别是触摸事件.手势事件.二指缩放事件.轨迹事件.屏幕旋转事件.基本导航事件.主要导航事件.系统按键事件.启动Activity事件.键盘事 ...

  8. luogu 4768

    kruskal 重构树对于一张无向图,我们在进行 kruskal 的过程中每当合并两个联通块时新建虚拟节点 t对于两个联通块的根节点 fau,fav 连无向边(fau, t),(fav, t) 其中点 ...

  9. python中的匿名函数

    python 使用 lambda 来创建匿名函数. 所谓匿名,意即不再使用 def 语句这样标准的形式定义一个函数. lambda 只是一个表达式,函数体比 def 简单很多. lambda的主体是一 ...

  10. 解决python 保存json到文件时 中文显示16进制编码的问题

    python 2.7 import codecs import json with codecs.open('Options.json', 'w', encoding='utf-8') as f: j ...