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

vue3封装而成的APP ，在版本更新后，页面显示空白

news 来源：原创 2025/5/14 18:11:41

一、问题展示

更新之后页面空白，打不开，主要是由于缓存造成的

二、解决办法

1、随机数代码实现

使用随机数来动态的生成静态资源目录名可以避免浏览器缓存，但同时每次也会导致浏览器每次都下载最新的资源。如果静态资源过大，可能会影响加载速度。vite.config.js文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path, { resolve } from "path";
import postCssPxToRem from "postcss-pxtorem";// 获取当前时间戳或随机数
const randomNum = Math.random().toString(36).substring(2, 8);  // 随机数：生成一个6位的随机字符串// https://vitejs.dev/config/
export default defineConfig({server: {host: "0.0.0.0",port: 8080,open: true,},base: "./",plugins: [vue()],resolve: {//别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'alias: [{find: "@",replacement: resolve(__dirname, "src"),},],},css: {postcss: {plugins: [postCssPxToRem({rootValue: 128, // 1rem，根据 设计稿宽度/10 进行设置propList: ["*"], // 需要转换的属性，这里选择全部都进行转换}),],},},build: {outDir: "dist", // 指定输出文件assetsDir: `static/${Math.random()}`, // 动态生成目录，保证唯一性rollupOptions: {output: {chunkFileNames: "static/js/[name]-[hash].js",entryFileNames: "static/js/[name]-[hash].js",assetFileNames(assetInfo) {if (assetInfo.name.endsWith(".css")) {return "static/css/[name]-[hash].[ext]";}// 针对图片文件类型做分类if (["png", "jpg", "jpeg", "gif", "svg", "PNG", "JPG"].some((ext) =>assetInfo.name.endsWith(ext))) {// 如果图片文件路径包含 'img' 或 'icons' 等关键字，则根据不同类型分类if (assetInfo.name.includes("icon") || assetInfo.name.includes("icons")) {return "static/icons/[name]-[hash].[ext]";}if (assetInfo.name.includes("img") || assetInfo.name.includes("imgs")) {return "static/img/[name]-[hash].[ext]";}return "static/img/[name]-[hash].[ext]"; // 默认图片文件夹}// 针对字体文件夹if (["ttf", "woff", "woff2"].some((ext) =>assetInfo.name.endsWith(ext))) {return "static/fonts/[name]-[hash].[ext]";}// 默认处理其他资源return "static/css/[name]-[hash].[ext]";},},},},
});

2、实现过程

randomNum:首先会生成一个随机数

assetDir:使用模板字符串讲randomNum插入到assetsDir配置项中。每次构建时，都会生成一个新的目录名

chainWebpack:WebPack的chainWebpack API允许你在构建时Webpack配置进行细粒度的控制。虽然此时我们不需要对其他部分进行更复杂的配置，但他可以为以后的构建提供灵活的定制

三、原理

1、解释说明

浏览器缓存的目的时为了提高访问速度，避免重复下载相同的资源。当静态资源没有变化时，浏览器会根据url中的文件名，文件路径和资源的http缓存策略来决定是否从缓存中加载资源。

而使用随机数的主要原理时通过改变静态资源的路径，强制浏览器每次都去请求最新的资源（因为路径变了，浏览器就会变化使用缓存中的旧资源了，每次都会下载新的资源）

(1)优点

避免缓存问题，对于经常更新的资源（js、css等），可以确保浏览器总是加载最新的文件，避免了由于浏览器缓存问题导致的用户看到旧版本的情况

控制缓存，你可以通过改变文件路径的方式来主动控制缓存的失效时机，不需要依赖服务器的缓存策略

(2)缺点

每次都请求最新资源，增加了请求次数，增加了网络带宽消耗，潜在的性能问题

四、其他

1、内容哈希实现（优解）

许多构建工具（如 Webpack、Vite 等）提供了内容哈希的功能。你可以在文件名中添加文件内容的哈希值，这样只有当文件内容发生变化时，文件名才会发生变化。这样就可以避免缓存问题，并且只有文件内容更新时才重新下载资源。

部分代码实现

// vite.config.js
export default {build: {rollupOptions: {output: {assetFileNames: '[name].[hash].[ext]', // 文件名中包含哈希值}}}
}

2、不是缓存导致的问题更新版本出现白屏

可以检查别的情况，有可能时路由错误导致找不到页面，路由重定向回到首页

{path: '/:pathMatch(.*)*',  // 处理所有未匹配的路由name: 'NotFound',redirect: '/home'}

或者你请求数据的token不对，都可能导致

vue3封装而成的APP ，在版本更新后，页面显示空白

一、问题展示更新之后页面空白，打不开 ，主要是由于缓存造成的二、解决办法 1、随机数代码实现使用随机数来动态的生成静态资源目录名可以避免浏览器缓存，但同时每次也会导致浏览器每次都下载最新的资源。如果静态资源过大，可…...

编程日记 2025/5/14 18:11:41

java系列: javaSE, javaEE，jdk8，jdk17，jdk21 springframework(4, 5, 6) springboot(2, 3) mybatis mybatisplus hibernate springjpa，springjdbc springmvc, springwebflux，structs springsecurity dubbo zookeeper s…...

编程日记 2025/5/14 18:11:41

初始c语言第一个c语言项目

第一个c语言项目 //c语言中一定要有main函数 //主函数//printf是一个库函数 //专门用来打印数据//std 标准 //i-input //o-output // #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h>//c语言规定main函数是程序的入口 //标准的主函数的写法 int main() {printf(&qu…...

编程日记 2025/5/14 5:42:40

CSS实现无限滚动的列表

CSS本身不能实现无限滚动的列表，无限滚动通常需要结合HTML、CSS和JavaScript来完成。以下是一个简单的实现无限滚动的列表的示例，它使用了JavaScript来动态加载和展示内容。 <!DOCTYPE html> <html lang"en"> <head> <me…...

编程日记 2025/5/14 2:30:44

【ES6复习笔记】Spread 扩展运算符（8）

在现代前端开发中，JavaScript 的扩展运算符（Spread Operator）是一个非常有用的特性，它允许你将数组或对象展开，以便在函数调用、数组拼接、对象复制等场景中更方便地处理数据。扩展运算符（spread&#xff0…...

编程日记 2025/5/13 3:49:48

【Rust自学】7.3. use关键字 Pt.1：use的使用与as关键字

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 7.3.1. use的作用 use的作用是将路径导入到当前作用域内。而引入的内容仍然是遵守私有性原则，也就是只有公共的部分引入进来才…...

编程日记 2025/5/14 18:10:28

Vscode + gdbserver远程调试开发板指南:

本章目录步骤环境准备网络配置vscode配置步骤 (全图示例)开发板配置开始调试注意: 每次断开之后，开发板都需要重新启动gdbserver才可调试。参考链接: 步骤环境准备将交叉编译链路径加入$PATH变量：确保系统能够找到所需的工具。 export PATH$PATH:/p…...

编程日记 2025/5/14 2:43:05

python爬虫----爬取视频实战

python爬虫-爬取视频本次爬取，还是运用的是requests方法首先进入此网站中，选取你想要爬取的视频，进入视频页面，按F12，将网络中的名称栏向上拉找到第一个并点击，可以在标头中，找到后续我们想要…...

编程日记 2025/5/11 6:31:38

shardingsphere分库分表项目实践5-自己用java写一个sql解析器+完整项目源码

前1节我们介绍了 shardingsphere 分表分库的sql解析与重写： shardingsphere分库分表项目实践4-sql解析&重写-CSDN博客那么shardingsphere sql 解析底层究竟是怎么实现的呢，其实它直接用了著名的开源软件 antlr . antlr 介绍： ANTLR&a…...

编程日记 2025/5/12 3:33:25

【Rust自学】7.2. 路径（Path）Pt.1：相对路径、绝对路径与pub关键字

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 7.2.1. 路径的简介在Rust里，如果想要找到模块里的某个东西，就必须知道并使用它的路径。Rust中的路径就跟文件系统…...

编程日记 2025/5/14 18:10:28

ubuntu虚拟机中搭建python开发环境

1.Anaconda安装 1）Anaconda下载清华大学开源软件镜像站下载地址：https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 官网：https://www.anaconda.com/distribution/ 2）运行 .sh 文件 bash Anaconda3-5.2.0-Linux-x86_…...

编程日记 2025/5/14 18:09:01

OpenHarmony-5.PM 子系统（2）

电池服务组件OpenHarmony-4.1-Release 1.电池服务组件 Battery Manager 提供了电池信息查询的接口，同时开发者也可以通过公共事件监听电池状态和充放电状态的变化。电池服务组件提供如下功能： 电池信息查询。充放电状态查询。关机充电。电池服务组件架…...

编程日记 2025/4/30 1:54:00

三相电的相电压、线电压、额定值、有效值，变比，零序电压，零序电流，三相三线制的三角形连接，三相四线制的星形连接

在二次设备配置中经常有根电压系统相关的名词，本身不是学电气的，有些名词经常查了忘，后续工作所有遇到跟电气相关的知识总结在此帖，便于后续直接查看，避免每次都要重新查、重新梳理。相电压和线电压的关系是根号3倍&a…...

编程日记 2025/5/7 8:37:15

基于 Slf4j 和 AOP 的自动化方法执行时间日志记录方案

前言其实这个需求很简单，但是这个需求又是项目中必不可少的，尤其对于性能调优这块，但是使用哪种方式更加方便呢，这就是本篇博文需要讨论的重点系统时间可以通过 System.currentTimeMillis() 或 System.nanoTime() 来实现。 …...

编程日记 2025/5/11 10:44:20

C语言-数据结构-树

目录一,树 1,基本术语: 2,树的性质: 3,树的遍历: 4,森林的遍历: 5,树和二叉树的转换: 6,二叉树和森林的转化: 7,树的存储: 1,双亲表示法 2、孩子链存储结构 3、孩子兄弟链存储结构二,二叉树: 1,二叉树的性质: 2,二叉树的遍历: 3,二叉树的存储结构: 顺序存储:…...

编程日记 2025/5/12 21:21:03

探究音频丢字位置和丢字时间对pesq分数的影响

丢字的本质丢字的本质是在一段音频中一小段数据变为0 丢字对主观感受的影响 1. 丢字位置丢字的位置对感知效果有很大影响。如果丢字发生在音频信号的静音部分或低能量部分，感知可能不明显；而如果丢字发生在高能量部分或关键音素上，感知…...

编程日记 2025/5/7 23:33:36

【Linux】flock 文件级别的锁定

flock 是 Linux/Unix 系统中的一个命令，用于实现文件级别的锁定。它允许你在多个进程之间共享对文件的访问，但确保在同一时间只有一个进程可以访问文件，避免竞态条件（race conditions）和数据不一致问题。 flock 的基本…...

编程日记 2025/5/10 13:13:59

每天40分玩转Django：Django部署概述

一、Django部署概述在开发阶段,我们通常使用Django内置的轻量级开发服务器runserver。但在生产环境中,为了应对大量并发请求,需要使用高性能的WSGI服务器,如Gunicorn、uWSGI等。同时还要配置Nginx等Web服务器作为反向代理,实现负载均衡、静态文件处理等。下面是Django部署的整…...

编程日记 2025/5/13 0:45:07

【unity c#】深入理解string，以及不同方式构造类与反射的性能测试（基于BenchmarkDotNet）

出这篇文章的主要一个原因就是ai回答的性能差异和实际测试完全不同，比如说是先获取构造函数再构造比Activator.CreateInstance(type)快，实际却相反对测试结果的评价基于5.0，因为找不到unity6确切使用的net版本，根据c#9推测是net5…...

编程日记 2025/5/10 17:27:53

防抖和节流的方法详解和CSS文本溢出小知识

1.防抖防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时场景：搜索框输入发请求，一些拖拽盒子，或者滚动事件防抖的实现：利用间歇函数 const timer =setTimeout(callback函数，间隔时间) //执行完会返回自身的这个定时器的编号//事件所触发的函…...

编程日记 2025/5/11 10:51:06

深度解析：Maven 和 Gradle 的使用比较及常见仓库推荐

Maven 和 Gradle 是 Java 项目中最常用的构建工具。它们各有优势，适用于不同的场景。本文将对两者进行详细的对比，并推荐一些常用的 Maven 和 Gradle 仓库，帮助开发者高效管理依赖。一、Maven 和 Gradle 的使用比较 1.1 基本介绍 Maven 基…...

编程日记 2025/5/9 8:18:31

CSS---实现盒元素div内input/textarea的focus状态时给父元素加属性！

注意兼容性，低版本浏览器无效要实现当 textarea 文本框获得焦点时，自动给其父元素添加类名或样式，您可以使用 CSS 的 :focus-within 伪类选择器。这个选择器会在元素本身或其任何子元素获得焦点时应用样式。示例代码假设您有以下 HTML 结…...

编程日记 2025/5/10 0:51:53

施耐德变频器ATV320系列技术优势：创新与安全并重

在工业自动化领域，追求高效、安全与智能已成为不可阻挡的趋势。施耐德变频器ATV320系列凭借其强大的设计标准和全球认证，成为能够帮助企业降低安装成本，提高设备性能的创新解决方案。【全球认证，品质保障】ATV320 系列秉持施耐德…...

编程日记 2025/5/14 15:38:03

Dynamo：Amazon 的高可用键值仓储

大家觉得有意义和帮助记得及时关注和点赞!!! Dynamo 是 Amazon 的高可用分布式键值存储（key/value storage）系统。这篇论文发表的时候（2007）它还只是一个内部服务，现在（改名为 DynamoDB）已经发…...

编程日记 2025/5/11 18:28:08

前端开发 -- 自动回复机器人【附完整源码】

一：效果展示本项目实现了一个简单的网页聊天界面，用户可以在输入框中输入消息，并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容，通过关键字匹配来生成自动回复。二：源代码分享 <!DOCTYP…...

编程日记 2025/5/10 17:32:37

离散数学群（半群，群，交换群,循环群，对称群，置换群,置换,交代群,轮换）详细,复习笔记

半群: 设G是一个非空集合，若为G上的二元代数运算，且满足结合律，则称该代数系统(G,)为半群性质:非空,封闭,结合律独异点: 含有单位元的半裙练习题： 例:设S是一个非空集合，p(S)是S的幂集，∩和U是p(S…...

编程日记 2025/5/13 6:08:24

Android Java 版本的 MSAA OpenGL ES 多重采样

最近多次被小伙伴问到 OpenGL 多重采样，其实前面文章里多次讲过了，就是构建2个缓冲区，多重采样缓冲区和目标解析缓冲区。代码流程 // Framebuffer IDs private int msaaFBO; private int msaaColorBuffer; private int msaaDepthBuffer;pr…...

编程日记 2025/5/14 17:57:42

学习笔记之初识HALCON

目录一、概要二、数据结构 1、图像Image 2、Region区域 3、XLD 三、图像预处理 1、图像的变换与校正 2、图像增强四、图像的形态学处理 1、边界提取 2、孔洞填充 3、骨架五、图像金字塔六、区域分割 1、区域生长 2、区域分裂与合并七、边缘检测 1、Pre…...

编程日记 2025/5/6 21:10:31

嵌入式硬件杂谈（七）IGBT MOS管三极管应用场景与区别

引言：在现代嵌入式硬件设计中，开关元件作为电路中的重要组成部分，起着至关重要的作用。三种主要的开关元件——IGBT（绝缘栅双极型晶体管）、MOSFET（金属氧化物半导体场效应晶体管）和三极管&#…...

编程日记 2025/5/11 11:14:00

【Rust自学】7.1. Package、Crate和定义Module

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 7.1.1. Rust的代码组织代码组织主要包括： 那些细节可以对外暴露，而哪些细节是私有的在作用域内哪些名称有效… …...

编程日记 2025/5/11 21:47:44

【已解决】pyinstaller打包ico图片报错：OSError: [WinError 225] 无法成功完成操作，因为文件包含病毒或潜在的垃圾软件。

起因： pyinstaller加上 --icon 参数打包时报错。命令如下： 解决： 关闭 Windows 的病毒防护即可，步骤如下。点屏幕右下角通知栏，进入“病毒和威胁防护”： 打开： 关闭实时保护&#xff08…...

编程日记 2025/5/13 7:11:22

广东粤万润与时序数据库TDengine携手打造智慧酒店新未来：数据驱动智能化转型

在智能化转型浪潮席卷全球的当下，智慧酒店行业已然成为推进智能生活应用的先锋领域。从智能照明到环境监测，从安防系统到沉浸式影音娱乐，智慧酒店通过技术赋能为用户提供了更加舒适、高效且个性化的服务体验。然而，随着设备的增多…...

编程日记 2025/5/10 1:20:00

基于云计算的分布式文件存储系统设计与实现

基于云计算的分布式文件存储系统设计与实现第一章绪论 1.1 研究背景及意义随着互联网技术的飞速发展，云计算作为一种新兴的计算模式，以其弹性伸缩、按需分配和成本效益高等特点，逐渐成为信息技术领域的研究热点。它为大数据处理、高性能…...

编程日记 2025/5/14 9:00:57

基于顺序表实现队列循环队列的处理

文章目录 1.假溢出的现象2.循环队列3.顺序表实现队列架构4.顺序表模拟实现队列5.设计循环队列（校招难度） 1.假溢出的现象下面的这个就是我们的假溢出的这个现象的基本的来源： 我们的这个队列里面是有9个位置的，我们知道这个队列…...

编程日记 2025/5/12 17:22:58

leecode377.组合总和IV

本题其实是多重背包问题，对于价值和重量都是nums[i]的的物品，求装满这个容量为4的背包共有多少种排列方式如果是组合问题，那么遍历顺序是先物品后背包，这样能保证物品按从小到大顺序依次放置，对于实例1求出来为4&…...

编程日记 2025/5/12 23:56:53

变量与数据类型 - 整型、浮点型、字符型等

引言在编程中，变量和数据类型是基础中的基础。理解它们如何工作以及如何正确使用它们对于编写高效且无误的代码至关重要。本文将详细介绍 C 中的几种基本数据类型：整型、浮点型、字符型等，并通过实例帮助读者更好地理解和掌握这些概念。一…...

编程日记 2025/5/11 2:42:04

selenium学习笔记（二）

文章目录前言设计模式POMPOM概念POM优势POM设计原则POM的实现 selenium的常用操作处理动态元素截图操作勾选复选框多层框架/窗口定位操作下拉框上传文件操作处理弹窗切换窗口拖拽操作如何处理浏览器驱动更新导致的问题selenium与网站监控监听网页内容变化监控网络请求 seleni…...

编程日记 2025/5/14 12:56:26

vue和uniapp中，点击按钮传递当前item对象，并从selectData数组中删除该条item数据

在 Vue 中，可以通过点击按钮传递 item 对象，并从 selectData 数组中删除该条数据。可以使用 Array.prototype.filter() 方法来实现这一点。以下是一个示例：说明数据结构：selectData 是一个包含多个对象的数组，每个对象都有 id 和 name 属性。渲染列表：使用 v-for 指令…...

编程日记 2025/5/11 1:35:54

双柱渐变图背景图

option {backgroundColor: #1b2735,tooltip: {//提示框组件trigger: axis,//触发类型柱状图axisPointer:{type:shadow} //触发效果移动上去背景效果}, xAxis: [//x轴{type: category,//坐标轴类型离散data: [1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月],//数据axisTick:f…...

编程日记 2025/5/11 23:08:49

OpenHarmony怎么修改DPI密度值？RK3566鸿蒙开发板演示

本文介绍在开源鸿蒙OpenHarmony系统下，修改DPI密度值的方法，触觉智能Purple Pi OH鸿蒙开发板演示，搭载了瑞芯微RK3566四核处理器，Laval鸿蒙社区推荐开发板，已适配全新开源鸿蒙OpenHarmony5.0 Release系统，适…...

编程日记 2025/5/3 20:05:14

KylinOS V10 SP3下编译openGauss与dolphin插件

编译环境 KylinOS v10 sp3gcc 7.3.0make 4.3opengauss 5.0.0 mkdir -p /data/opengauss cd /data/opengauss git clone https://gitee.com/opengauss/openGauss-server.git git clone https://gitee.com/opengauss/Plugin.git wget -c https://opengauss.obs.cn-south-1.myhu…...

编程日记 2025/5/9 4:25:44