单页面应用总是存在缓存问题，特别是在微信端，更新页面之后访问的还是老页面，缓存的问题是因为用户访问的脚本地址并没有改变，浏览器就会读取原来的脚本

网上有几种解决办法，首先列举一下

1.加meta，禁止页面缓存

如果有些功能需要页面缓存的话这种方式就不适用，而且禁止缓存之后用户的请求的次数就会增多，流量消耗过快。

2.手动改变脚本地址，webpack打包的时候加一个版本号，这样每次打包的脚本路径就不同，浏览器就会重新读取脚本，解决缓存问题，上图说话

在config下的index.js中加一个version变量，然后修改assetsSubDirectory，然后打包之后就会是下图这种

这种测试过，有一个问题，就是项目中css中如果有使用背景图，背景图就会找不到，图片路径有问题，目前我没有办法解决，如果有大佬能解决，可以留言，多谢

3.加时间戳的方法，html页面加载脚本的时候给脚本后面加一个时间戳，原理和第二种一样，改变路径。直接上图

按照图上面加一个hash属性，获取时间戳

这是没加之前的

这是加过之后的

vue项目中缓存问题的更多相关文章

  1. <转载> VUE项目中CSS管理

    vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...

  2. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  3. Vue项目中出现Loading chunk {n} failed问题的解决方法

    最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...

  4. vue项目中使用bpmn-流程图预览篇

    前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...

  5. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  6. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  7. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  8. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  9. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

随机推荐

  1. Objective C 中的BOOL, bool, Boolean理解

    一. 1.类型不同 BOOL为int型 bool为布尔型 2.长度不同 bool只有一个字节 BOOL长度视实际环境来定,一般可认为是4个字节 3.取值不同 bool取值false和true,是0和1 ...

  2. windows环境下wampserver配置https

    因为公司业务主要是在微信上进行开展的,所以作为程序员的我们每天的开发任务就都是在与微信打交道,这个时候我们就需要在本地配置端口映射到外网,方便我们在微信客户端进行调试. 最近某种需要,所以需要配置 h ...

  3. IE浏览器下的渐变背景

    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);(标准) linear-gradient 在 ie9 以下是不支持的,所 ...

  4. Strom入门

    Worker.Executor.Task详解: Storm在集群上运行一个Topology时,主要通过以下3个实体来完成Topology的执行工作:1. Worker Process(工作进程)——S ...

  5. C/C++函数指针，指针函数的用法，用处

     先看函数指针 int func2(int x); /* 声明一个函数 */ int (*q2) (int x); /* 声明一个函数指针 */ q2=func2;    /* 将func函数的首地址 ...

  6. eclipse 误删文件的恢复，代码的恢复

    误删除文件的恢复 在用eclipse进行代码编写操作时,有时会误删除文件或者文件包.通过eclipse的恢复文件功能可以恢复误删除的文件. 具体步骤为: 1.选择误删除文件在eclipse所在包(文件 ...

  7. Android应用开发基础之八：广播与服务（二）

    服务两种启动方式 startService:服务被启动之后,跟启动它的组件没有一毛钱关系 bindService:跟启动它的组件同生共死 绑定服务和解绑服务的生命周期方法:onCreate->o ...

  8. Qt 窗口移动实现

    很多人觉得系统自带的标题栏太丑了,想要自绘一个标题栏,去掉了系统自带的标题栏后,就需要自己实现窗口移动,下面的代码就是实现窗口移动. widget.h #ifndef WIDGET_H #define ...

  9. March 8 2017 Week 10 Wednesday

    Rules are meant to be broken. 规则就是用来被打破的. What is innovation? Some may tell you innovation is to bre ...

  10. bootstrapTable refresh 方法使用简单举例

    本文就bootstrapTable refresh 方法如何传递参数做简单举例说明. 下面代码中,一个table,一个button,单击button会触发刷新表格操作. <!DOCTYPE ht ...