专栏首页前端逗逗飞Vue 打包上线后的缓存问题

Vue 打包上线后的缓存问题

问题描述

大家用vue脚手架搭建前端工程时,常被缓存问题所困扰,具体的表现就是,当程序版本升级时,用户因为缓存访问的还是老的页面,然后很多同学很暴力的直接在index.html中加入了这几行代码:

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

升级时缓存问题倒解决了,但直接导致了用户每次访问你的程序时都要重新请求服务器,所有的静态资源都无法用缓存了,浪费流量,网络压力变大。

需求澄清

我们真正需要解决的问题,不是单纯的要缓存或者不要缓存,而是期望视情况而定:

  • 程序每次升级后,用户都不会因为缓存问题而执行的仍然是老的程序。
  • 若程序没升级,用户对静态资源的请求则能用到缓存。

解决原理

由于vue脚手架每次打包时,都会将打出的静态资源文件名加个哈希后缀,且index.html中引入时也加了对应的哈希后缀,所以每个版本的静态资源都是全新的,不用担心因升级导致的缓存问题。那么只需让index.html不缓存,且让其他静态资源缓存,就能实现要求。

让静态资源有缓存好办,问题在于怎么只让index.html不缓存。这里我们已经不能单单靠前端代码来实现了,需要用到服务器配置。通过服务器配置,来单独设置请求index.html时的header,以达到控制缓存的目的。

具体实现

如果你是Nginx:

Ngnix还是比较容易实现的,只需增加以下配置:

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

修改webpack的配置文件

 configureWebpack: { // webpack 配置
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    }
onst Timestamp = new Date().getTime();
// Vue.config.js 配置选项
module.exports = {
    // publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',

    //基本路径
    publicPath: '/',//默认的'/'是绝对路径,如果不确定在根路径,改成相对路径'./'
    // 输出文件目录
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        // extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
    },
    // webpack-dev-server 相关配置
    devServer: {
        open: true,//open 在devServer启动且第一次构建完成时,自动用我们的系统的默认浏览器去打开要开发的网页
        host: 'localhost',//默认是 localhost。如果你希望服务器外部可访问,指定如下 host: '0.0.0.0',设置之后之后可以访问ip地址
        port: 8080,
        hot: true,//hot配置是否启用模块的热替换功能,devServer的默认行为是在发现源代码被变更后,通过自动刷新整个页面来做到事实预览,开启hot后,将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
        https: false,
        hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下,前者会自动刷新页面,后者不会刷新页面,而是在控制台输出热更新失败
        proxy: {
            '/api': {
                target: 'http://localhost:8080', //目标接口域名
                secure: false, //false为http访问,true为https访问
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '' //重写接口
                }
            }
        }, // 设置代理
        before: app => { }
    },
    configureWebpack: { // webpack 配置
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • electron-vue打包后regedit模块的问题

    electron-vue开发的的时候能用regedit模块赖拿到注册表的数据,打包好了以后就拿不到注册表的数据了

    用户4282947
  • vue-element-admin打包后白屏的问题

    如果这个时候,还是空白的话 打开浏览器,路径都是正确的,没有报错 但是就是不显示界面内容

    王小婷
  • vue项目打包后css背景图路径不对的问题

    自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图:

    用户1174387
  • 解决vue cli3.x打包上线静态资源找不到路径问题

    本教程适用于vue-cli3.x版本搭建的vue项目,解决项目本地运行一切正常,但是打包后部署时页面白屏,控制台报错,静态资源找不到的问题。

    青年码农
  • vue白屏优化方案

      vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况。那么该问题产生原因是什么呢?我们又该如何应对呢?

    流眸
  • 解决 VueCLI3 项目打包上线刷新 404 的问题

    最近我创建的 极客返利平台 采用前后分离的方式。前端框架主要是 VueCLI 搭建的。

    hedeqiang
  • 解决 VueCLI3 项目打包上线刷新 404 的问题

    最近我创建的 极客返利平台 采用前后分离的方式。前端框架主要是 VueCLI 搭建的。

    hedeqiang
  • 【优化】vue项目缓存引发的白屏

    近期vue项目在构建完成上线之后,每次往线上更新版本,总会收到一部分反馈——web页面白屏,需要清除缓存数据重新加载才能正常访问。

    流眸
  • 2.4G上的无线共存问题

    2.4 GHz无线共存已经存在至少20年了。真正的问题在于,不同的2.4 GHz无线技术满足了同一设备的不同需求,因此必须要在同时运行而不会出现明显的性能退化。...

    半吊子全栈工匠
  • 基于 Vue 技术栈的微前端方案实践

    对于大型前端项目,比如公司内部管理系统(一般包括 OA、HR、CRM、会议预约等系统),如果将所有业务放在一个前端项目里,随着业务功能不断增加,就会导致如下这些...

    coder_koala
  • LsLoader——通用移动端Web App离线化方案

    背景 由于JavaScript(以下简称JS)语言的特性,前端作用域拆分一直是前端开发中的首要关卡。从简单的全局变量分配,到RequireJS实现的AMD模块方...

    美团技术团队
  • 使用Vue-cli搭建项目教程

    大象无痕
  • Vue 新增不参与打包的接口地址配置文件

    vue工程项目,npm run build webpack方式打包,每次打包后如果需要更改后台接口地址(项目中,接口地址设置成变量,存放在js文件中,需要用到的...

    授客
  • 前端测试题:(解析)关于Vue首屏加载优化,说法不正确的是?

    是一套用于构建用户界面的渐进式JAVASCRIPT框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手...

    舒克
  • 漫谈前端性能优化

    https://www.cnblogs.com/zjstar12/archive/2012/01/12/2320408.html

    一粒小麦
  • 一年半前端人总结的大厂高频面经(附学习资源)

    作者:俊劫 https://juejin.cn/post/6942988170208215076

    用户4456933
  • Vue常用性能优化

    不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并且会收集watcher,这样还占内存,不需要响应式的数据我们可以直接定义...

    WindrunnerMax
  • 页面性能优化的五种办法

    大部分用户希望网页能在 2 秒之内就完成加载。事实上,加载时间每多 1 秒,你就会流失 7% 的用户。如果加载需要太长时间,他们就会放弃访问。

    小生方勤
  • 7.8 月份新出炉大厂面试题100道整理(原题 + 精讲 1.2万字)(一)

    大家喜欢的可以给笔者点个赞,花费了很长时间整理,这些面试题更适合中级前端,和需要进阶的高级前端的小伙伴,查缺补漏,为金九银十保驾护航???

    用户6835371

扫码关注云+社区

领取腾讯云代金券