vue解决部署文件缓存方式

问题:系统上线后,除了bug。紧急修复后,发现安卓正常,ios上海市有问题。通过debug后发现,ios上缓存严重。于是想到了打包文件加时间戳的方式来去除缓存。
vue2 配置打包输出文件名方式:

const baseUrl = "./"
const timestr = new Date().getTime()
module.exports = {outputDir: "delixi",publicPath: baseUrl, // 根据你的实际情况更改这里// 选项...lintOnSave: false,productionSourceMap: false,devServer: {port: 8080,overlay: {warnings: true,errors: true}},filenameHashing: false,configureWebpack: {performance: {hints: false},output: {filename: `js/js[name].${timestr}.js`,chunkFilename: `js/chunk.[id].${timestr}.js`,}},css: {extract: {filename: `css/[name].${timestr}.css`,chunkFilename: `css/chunk.[id].${timestr}.css`,}}}

附:vite配置打包文件名称加时间戳方式

import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';
import vue2 from '@vitejs/plugin-vue2';
const Timestamp = new Date().getTime();//随机时间戳
export default ({ mode }) => {const { VITE_PORT, VITE_BASE_URL, VITE_PROXY_DOMAIN_REAL } = loadEnv(mode, process.cwd());return defineConfig({base: VITE_BASE_URL,plugins: [vue2()],resolve: {alias: {'@': resolve(__dirname, 'src'),},},css: {preprocessorOptions: {less: {modifyVars: {hack: `true; @import (reference) "${resolve('src/style/variables.less')}";`,},math: 'strict',javascriptEnabled: true,},},},server: {// 是否开启 httpshttps: false,// 端口号port: VITE_PORT,// 监听所有地址host: '0.0.0.0',// 服务启动时是否自动打开浏览器open: false,// 允许跨域cors: true,// 自定义代理规则proxy: {'/admin': {target: VITE_PROXY_DOMAIN_REAL,ws: true,changeOrigin: true,// rewrite: (path) => path.replace(/^\/admin/, ''),},'/master': {target: VITE_PROXY_DOMAIN_REAL,ws: true,changeOrigin: true,// rewrite: (path) => path.replace(/^\/admin/, ''),},},},build: {outDir: 'delixi',// publicPath: './',// 设置最终构建的浏览器兼容目标target: 'es2015',// 构建后是否生成 source map 文件sourcemap: false,//  chunk 大小警告的限制(以 kbs 为单位)// chunkSizeWarningLimit: 2000,// 启用/禁用 gzip 压缩大小报告reportCompressedSize: false,rollupOptions: {output: {chunkFileNames: `static/js/[name].[hash]${Timestamp}.js`,entryFileNames: `static/js/[name].[hash]${Timestamp}.js`,assetFileNames: `static/[ext]/[name].[hash]${Timestamp}.[ext]`,},}},});
};

这次h5活动遇到的大坑:
1、使用vite做的h5项目,在ios上缓存刷新不掉,或者很久才能刷新掉。打包文件加时间戳,部分手机也无效
2、iOS上,点击事件有时候会失效。或者是路由跳转不过去。同一个手机有时候会发剩,有时候正常。最终重构项目,不使用vite。没有再发生类似问题。。。

推荐:好用的230G电话卡

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/634972.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java 设计模式】结构型之组合模式

文章目录 1. 定义2. 应用场景3. 代码实现结语 组合模式(Composite Pattern)是一种结构型设计模式,它允许将对象组合成树形结构以表示“部分-整体”的层次结构。组合模式使得客户端可以统一处理单个对象和对象组合,无需区分它们之间…

设计社交网络的数据结构

1: 确定 Use Case 和 约束 Use Cases User 搜索某人然后看到被搜索人的最短路径Service 有高可用 约束和假设 状态假设 Traffic 不是平均分布的 一些被搜索者是更加受欢迎的,某些被搜索者只会被搜索一次图数据不适用与单个机器图的分布是轻量级的一亿个 User每…

canvas绘制N角形,锯齿状

查看专栏目录 canvas实例应用100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…

C++入门【31-C++ 基本的输入输出】

C 标准库提供了一组丰富的输入/输出功能,我们将在后续的章节进行介绍。本章将讨论 C 编程中最基本和最常见的 I/O 操作。 C 的 I/O 发生在流中,流是字节序列。如果字节流是从设备(如键盘、磁盘驱动器、网络连接等)流向内存&#…

【Python 千题 —— 基础篇】姓名与性别

题目描述 题目描述 姓名与学号。班级中有 Tom、Alan、Bob、Candy、Sandy 五个人,他们的性别分别是男、男、男、女、女;请将他们的姓名与性别关联成字典,转换成字符串并输出。 输入描述 无 输出描述 输出字典转换成的字符串。 示例 示例 ① 输出: {Tom: 男, Alan:…

在线扒站网PHP源码-在线扒站工具网站源码

源码介绍 这是一款在线的网站模板下载程序,也就是我们常说的扒站工具,利用它我们可以很轻松的将别人的网站模板样式下载下来,这样就可以大大提高我们编写前端的速度了!注:扒取的任何站点不得用于商业、违法用途&#…

kafka参数配置参考和优化建议 —— 筑梦之路

对于Kafka的优化,可以从以下几个方面进行思考和优化: 硬件优化:使用高性能的硬件设备,包括高速磁盘、大内存和高性能网络设备,以提高Kafka集群的整体性能。 配置优化:调整Kafka的配置参数,包括…

免费的爬虫软件【2024最新】

在国际市场竞争日益激烈的背景下,国外网站的SEO排名直接关系到网站在搜索引擎中的曝光度和用户点击量。良好的SEO排名能够带来更多的有针对性的流量,提升网站的知名度和竞争力。 二、国外网站SEO排名的三种方法 关键词优化: 关键词优化是SEO…

Red Hat Enterprise Linux 9.3 安装图解

引导和开始安装 选择倒计时结束前,通过键盘上下键选择下图框选项,启动图形化安装过程。需要注意的不同主板默认或者自行配置的固件类型不一致,引导界面有所不同。也就是说使用UEFI和BIOS的安装引导界面是不同的,如图所示。若手动调…

ITK + ANT,无法显示三维

背景:之前用ANT保存ima格式的数据,选择的是保存所有的序列 用python将dicom转为nii的格式, import nibabel as nib import torch"""不管是nii还是nii.gz都是二维的,为啥呢"""fobj nib.load("…

【AUTOSAR】RTE 接口类型、应用场景差别及实例讲解

目录 摘要 概念 CS接口 SR接口 接口选择 对于CPU负载率的影响

Qt弹框展示

1.相关说明 文件选择弹框、目录选择弹框、保存文件弹框、颜色选择弹框、字体选择弹框、进度条弹框、输入对话框、标准消息框等 2.相关界面 3.相关代码 #include "widget.h" #include "ui_widget.h" #include <QFileDialog> #include <QProgressD…

Red Hat Enterprise Linux 6.10 安装图解

引导和开始安装 选择倒计时结束前&#xff0c;通过键盘上下键选择下图框选项&#xff0c;启动图形化安装过程。需要注意的不同主板默认或者自行配置的固件类型不一致&#xff0c;引导界面有所不同。也就是说使用UEFI和BIOS的安装引导界面是不同的&#xff0c;如图所示。若手动调…

Pytorch 对比TensorFlow 学习:Day 17-18: 循环神经网络(RNN)和LSTM

Day 17-18: 循环神经网络&#xff08;RNN&#xff09;和LSTM 在这两天的学习中&#xff0c;我专注于理解循环神经网络&#xff08;RNN&#xff09;和长短期记忆网络&#xff08;LSTM&#xff09;的基本概念&#xff0c;并学习了它们在处理序列数据时的应用。 1.RNN和LSTM基础…

HashMap1.7和1.8的区别

HashMap1.7和1.8的区别 1.JDK1.7用的是头插法&#xff0c;而JDK1.8及之后使用的都是尾插法 那么为什么要这样做呢&#xff1f;因为JDK1.7是用单链表进行的纵向延伸&#xff0c;当采用头插法时&#xff0c;再多线程环境下并发扩容的时候&#xff0c;会容易出现环形链表死循环问…

go 语言(九)----struct

定义一个结构体 type Book struct {title stringauth string }结构体使用 package mainimport "fmt"//定义一个结构体 type Book struct {title stringauth string }func main() {var book1 Bookbook1.title "Golang"book1.auth "zhang3"fmt…

使用 TiUP 部署 TiDB 集群

TIDB优点 支持分布式且支持事务的关系型数据库&#xff0c;不用考虑分库分表 同时满足了可伸缩&#xff0c;高可用&#xff0c;关系型&#xff0c;支持事务。 基本上按官网的文档来就行了。 在线部署 以普通用户身份登录中控机。以 tidb 用户为例&#xff0c;后续安装 TiUP …

用git bash调用md5sum进行批量MD5计算

对于非常大的文件或者很重要的文件&#xff0c;在不稳定的网络环境下&#xff0c;可能文件的某些字节会损坏。此时&#xff0c;对文件计算MD5即可以校验其完整性。比如本次的 OpenStreetMap 导出包&#xff0c;我的学弟反馈通过网盘下载无法解压&#xff0c;并建议我增加每个文…

MOS管和IGBT管的定义与辨别

MOS管和IGBT管作为现代电子设备使用频率较高的新型电子器件&#xff0c;因此在电子电路中常常碰到也习以为常。可是MOS管和IGBT管由于外形及静态参数相似的很&#xff0c;有时在选择、判断、使用容易出差池。MOS管和IGBT管可靠的识别方法为选择、判断、使用扫清障碍&#xff01…

android使用相机 intent.resolveActivity returns null

问题 笔者使用java进行android开发&#xff0c;启动相机时 intent.resolveActivity returns null takePictureIntent.resolveActivity(getPackageManager()) null详细问题 笔者使用如下代码启动相机 // 启动相机SuppressLint("LongLogTag")private void dispatc…