vue多次打包后出现浏览器缓存的问题及解决

目录
  • vue多次打包后出现浏览器缓存
    • 解决方案
  • 使用hash解决vue浏览器的缓存
    • 缓存问题
    • 怎么解决缓存问题
    • 解决办法

vue多次打包后出现浏览器缓存

每次打包更新版本上传到服务器上，会偶尔出现代码没有更新还是旧代码的逻辑，这就代表浏览器存在缓存的问题了。

解决方案

vue-cli2

webpack .prod.conf.js 下修改output

const  Timestamp = new Date().getTime();

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

vue-cli3

vue.config.js 下修改/添加output

const  Timestamp = new Date().getTime();

configureWebpack: {
    output: { 
       filename: 'js/[name].'+Timestamp+'.js',
       chunkFilename: 'js/[name].'+Timestamp+'.js'
    }
}

接下来就是打包好，就会发现打包出来的文件都有哈希值啦，就不会出现缓存问题啦，保证每次都是最新的。

使用hash解决vue浏览器的缓存

缓存问题

第一次打包，生成一个bundle.js，在index.html引入bundle.js文件，页面加载，它会把bundle.js缓存到浏览器本地。

这是浏览器的缓存机制。当我们又重新打包了，由于文件名还是bundle.js，浏览器就可能从缓存中获取，因为浏览器发现这个bundle.js，在浏览器的缓存中有，缓存中有，就走缓存。从缓存中获取上一次打包的结果。

怎么解决缓存问题

之所以有缓存是由于文件名或url名是一样的，只有一样了，浏览器才会偷懒，从缓存中获取资源，如果url名或文件名不一样，肯定不会走缓存，浏览器会当成一个新资源。

解决办法

打包时 指定 出口 文件名每一次都不一样。

在webpack中有一个hash的东西：

hash可以保存每一次的值都是不一样的。

filename:"bundle.[hash].js",  这样定，每一次生成的打包后文件名就不一样了。

注意：

当hash 用于开发打包时会打包成不同名字的文件，但是用于打包生产模式时的文件时不会生成不同的文件名。

因为生产时只需要发布时打包一次就行了。而开发时需要多次打包。

效果如下：（打包后的文件后面多了一串字符）

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue封装一个TodoList的案例与浏览器本地缓存的应用实现

    Vue封装一个TodoList的案例与浏览器本地缓存的应用实现

    本文主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现,分享给大家,具体如下: 使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段. 浏览器本地缓冲: 前提: 一般我们定义的变量,或者用Vuex保存的数据, 当浏览器进行了一个刷新 那么这个数据就会丢失, 这样就做不出历史记录的效果了, 但是, 使用浏览器缓存就可以帮助我们解决这个问题- 浏览器缓存分为二种 sessionStorage 和 localStorage, 二种原型链分别如下:

  • Vue SPA 如何解决浏览器缓存问题

    目录 Vue SPA 解决浏览器缓存 Vue 微信浏览器缓存问题 Vue SPA 解决浏览器缓存 如何让发布到线上的 vue 单页应用能及时更新到浏览器,而无需用户强制刷新页面呢? 因为 js.css.图片等资源文件名带有 hash 值,只要文件名变了就会更新,所以可以设置缓存,但 html 文件名没有加 hash 值,所以不能缓存该文件. 在 nginx.conf 中设置         location / {             root html/dist;            

  • vue项目中禁用浏览器缓存配置案例

    vue项目中禁用浏览器缓存配置案例

    项目发布版本会遇到经常需要清理缓存的问题,以下是项目禁用缓存的实际方法 1.public文件夹中修改 index.html文件meta配置 <meta http-equiv="pragram" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" /> &l

  • vue 部署上线清除浏览器缓存的方式

    vue 部署上线清除浏览器缓存的方式

    目录 部署上线清除浏览器缓存 修改根目录index.html 配置 nginx 不缓存 html 打包的文件路径添加时间戳 vue项目部署,清理缓存方式 部署上线清除浏览器缓存 vue 项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存.这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存. 下面是我的解决方案: 修改根目录index.html 在 head 里面添加下面代码 <meta http-equiv="pragram" content=&

  • 详解vue服务端渲染浏览器端缓存（keep-alive）

    在使用服务器端渲染时,除了服务端的接口缓存.页面缓存.组建缓存等,浏览器端也避免不了要使用缓存,减少页面的重绘. 这时候我们就会想到vue的keep-alive,接下来我们说一下keep-alive的使用 假如现在我们有两个页面,home.vue 和 about.vue home.vue <template> <div> home </div> </template> <script> export default { name: Home, c

  • 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机

  • vue多次打包后出现浏览器缓存的问题及解决

    vue多次打包后出现浏览器缓存的问题及解决

    目录 vue多次打包后出现浏览器缓存 解决方案 使用hash解决vue浏览器的缓存 缓存问题 怎么解决缓存问题 解决办法 vue多次打包后出现浏览器缓存 每次打包更新版本上传到服务器上,会偶尔出现代码没有更新还是旧代码的逻辑,这就代表浏览器存在缓存的问题了. 解决方案 vue-cli2 webpack .prod.conf.js 下修改output const  Timestamp = new Date().getTime(); output: {     path: config.build.

  • vue项目 npm run build 打包项目防止浏览器缓存的操作方法

    在vue.config.js配置 推荐方法1: const Timestamp = new Date().getTime() module.exports = { ...... configureWebpack: config => { config.output.filename = `js/[name].${Timestamp}.js` config.output.chunkFilename = `js/[name].${Timestamp}.js` }, ...... css: { ...

  • 基于vue打包后字体和图片资源失效问题的解决方法

    1. vue打包后font-awesome字体失效 解决方案: 2. 打包后图片资源失效 解决方案: 针对html中引用的图片 针对css添加的背景中引用的图片 以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决vue打包之后静态资源图片失效的问题 vue cli使用绝对路径引用图片问题的解决 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题 vue-cli中打包

  • 解决vue脚手架项目打包后路由视图不显示的问题

    脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题. 解决办法如下: Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 scrollBehavior: () => ({ y: 0 }), routes }) 比如我是将打包后的dist和ind

  • 解决vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import

  • vue cli3.x打包后如何修改生成的静态资源的目录和路径

    目录 vue cli3.x打包后修改生成的静态资源的目录和路径 vue3.3打包后,路径出错问题 vue cli3.x打包后修改生成的静态资源的目录和路径 在vue cli 2.x版本修改目录和路径,都在'/config/index'文件里修改. 但是vue cli升级成3.x发现这些文件都不见啦,就一个'vue.config.js'文件,我们可以在这里修改: `module.exports = {   // 没有书写outputDir属性   默认'dist'  对应dev.assetsSub

  • vue打包后出现空白页的原因及解决方式详解

    vue打包后出现空白页的原因及解决方式详解

    目录 路由模式 history 路由模式 hash 总结 1. 修改路径 2. 更改路由模式 路由模式拓展 路由的hash和history模式的区别 打包路由选择 路由模式 history 新建项目什么都不动,路由模式:history, 直接npm run build打包 打包之后,直接打开dist文件里面的ndex.html可以看到页面是空白的,控制台是这样的. 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的,应该用'./'而不是'/' 那怎么修改打包之后的路径呢?查看

  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '

  • 如何解决vue项目打包后文件过大问题

    如何解决vue项目打包后文件过大问题

    目录 为什么打包后文件过大? 如何快速解决 1.路由懒加载[使用es6提案的import()方式] 2.CDN引入 为什么打包后文件过大? 移动app项目,使用vue-cli脚手架搭建,UI主要运用的是Muse-UI,开发过程中为满足需求,混入Element-UI部分组件,加之团队开发,前端不止一人参与,在没有统一规范约束的情况下,编码风格和方式都很迥异和…混乱,以致依赖过多,打包时webpack把所有的库都打包在一起,所以vendor.js文件和app.js文件很大,最后出现进入首个页面时会长

  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    目录 一.目的 二.具体操作实现 总结 一.目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创

随机推荐