当前位置: 首页 > news >正文

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电话卡

相关文章:

vue解决部署文件缓存方式

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

游戏开发中的噪声算法

一、噪声 噪声是游戏编程的常见技术,广泛应用于地形生成,图形学等多方面。 那么为什么要引入噪声这个概念呢?在程序中,我们经常使用直接使用最简单的rand()生成随机值,但它的问题在于生成的随机值太“随机”了&#xf…...

CodeReview 小工具

大家开发中有没有遇到一个版本开发的非常杂,开发很多个项目,改动几周后甚至已经忘了自己改了些什么,领导要对代码review的时候,理不清楚自己改过的代码,只能将主要改动的大功能过一遍。这样就很容易造成review遗漏&…...

UE5 C++ Slate独立程序的打包方法

在源码版安装目录内找到已编译通过的xxx.exe,(\Engine\Binaries\Win64\xxx.exe),在需要的位置新建文件夹,拷贝源码版Engine内的Binaries、Content、Shaders文件夹到目标文件夹内,将xxx.exe放入对应位置,删除…...

探索设计模式的魅力:一篇文章让你彻底搞懂建造者模式

建造者模式(Builder Pattern)是一种创建型设计模式,旨在将一个复杂对象的创建过程与其表示分离,使得同样的构建过程可以创建不同的表示形式。 主要角色: 产品(Product):表示正在构建…...

Facebook广告投放指南,如何运营多个Facebook广告账户不被封?

许多卖家做广告投放会选择 Facebook 作为主要的业务和产品推广平台。然而,要在这个竞争激烈的平台上脱颖而出并成功拓宽广告覆盖面并不容易,通常情况下大家会运营多个Facebook广告账号,但是很多人因此遭遇Facebook账号被封的情况,…...

音乐人声分离工具:极简的人声和背景音乐分离工具

项目地址:jianchang512/vocal-separate: an extremely simple tool for separating vocals and background music, completely localized for web operation, using 2stems/4stems/5stems models 这是一个极简的人声和背景音乐分离工具,本地化网页操作&a…...

Go语言基础快速上手

1、Go语言关键字 2、Go数据类型 3、特殊的操作 3.1、iota关键字 Go中没有明确意思上的enum(枚举)定义,不过可以借用iota标识符实现一组自增常亮值来实现枚举类型。 const (a iota // 0b // 1c 100 // 100d // 100 (与上一…...

Excel 根据日期按月汇总公式

Excel 根据日期按月汇总公式 数据透视表日期那一列右击,选择“组合”,步长选择“月” 参考 Excel 根据日期按月汇总公式Excel如何按着日期来做每月求和...

使用 crypto-js 进行 AES 加解密操作

在前端开发中,数据的加密和解密是为了保障用户隐私和数据的安全性而常见的任务。AES(Advanced Encryption Standard)是一种对称密钥加密算法,被广泛用于保护敏感信息的传输和存储。本文将介绍 AES 加解密的基本原理,并…...

Vue-30、Vue非单文件组件。

非单文件组件&#xff1a; 一个组件包含n个组件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>非单文件组件</title><script type"text/javascript" src"https://cdn.jsde…...

7-6 实验2_1_判断两数的大小

7-6 实验2_1_判断两数的大小 分数 100 全屏浏览题目 切换布局 作者 scs 单位 北京邮电大学 已知有两个整数&#xff0c;请使用if-else选择结构将它们中的较大数选择出来&#xff0c;存到max变量中&#xff1b;将较小数选择出来&#xff0c;存到min变量中&#xff0c;并将选…...

POKT Network (POKT) :进军百亿美元市场规模的人工智能推理市场

POKT Network&#xff08;又称 Pocket Network&#xff09;是一个去中心化的物理基础设施网络&#xff08;DePIN&#xff09;&#xff0c;它能够协调并激励对任何开放数据源的访问&#xff0c;最初专注于向应用程序和服务提供商提供区块链数据。 自 2020 年主网上线以来&#x…...

【STM32】STM32学习笔记-I2C通信外设(34)

00. 目录 文章目录 00. 目录01. I2C简介02. I2C外设简介03. I2C框图04. I2C基本结构05. 主机发送06. 主机接收07. 软件/硬件波形对比08. 预留09. 附录 01. I2C简介 I2C(Inter&#xff0d;Integrated Circuit)总线是一种由NXP&#xff08;原PHILIPS&#xff09;公司开发的两线式…...

从数据角度分析年龄与NBA球员赛场表现的关系【数据分析项目分享】

好久不见朋友们&#xff0c;今天给大家分享一个我自己很感兴趣的话题分析——NBA球员表现跟年龄关系到底大不大&#xff1f;数据来源于Kaggle&#xff0c;感兴趣的朋友可以点赞评论留言&#xff0c;我会将数据同代码一起发送给你。 目录 NBA球员表现的探索性数据分析导入Python…...

深入浅出Spring AOP

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;咱们今天要聊的是Java中Spring框架的AOP&#xff08;面向切面编程&#xff09;。对于程序员来说&#xff0c;理解AOP对于掌握Spring框架来说是超级关键的。它像是魔法一样&#xff0c;能让咱们在不改变原有代码的…...

火速收藏!2024 新年微信红包封面领取全攻略

2024“龙”重登场&#xff01;今年有哪些令人期待的红包封面&#xff1f; 前方大批精美红包封面来袭&#xff0c;全新品牌氛围红包封面上线&#xff0c;支持品牌定制特色氛围元素&#xff0c;沉浸感受浓浓年味儿&#xff0c;收获满满惊喜&#xff01; 新年开好运&#xff0c;微…...

【RabbitMQ】RabbitMQ安装与使用详解以及Spring集成

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《RabbitMQ实战》。&#x1f3af;&#x1f3af; &am…...

企业多云组网怎么办?

在当今数字化时代&#xff0c;企业普遍采用多云策略&#xff0c;同时利用不同云平台的优势以实现成本优化和整体性能提升。根据Futuriom于2022年发布的“安全多云网络调查”报告&#xff0c;80%的受访者表示他们使用来自两个或更多公共云提供商的PaaS或IaaS产品。 多云策略的迅…...

背包问题(贪心) 二维01背包问题 Java

背包问题&#xff08;贪心&#xff09; 最优装载问题 题目描述 有n件物品和一个最大承重为w 的背包。第i件物品的重量是weight[i]&#xff0c;每件只能用一次&#xff0c;求装入背包的最多物品数量。 题目分析 因为我们只要求装入物品的数量&#xff0c;所以装重的显然没有…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...