解决vue3更新chunk包后,点击页面报错

news/2024/7/27 16:47:04

出现错误

在这里插入图片描述

解决思路

试了好多方法,跳了很多坑,router版本对不上,解决方案不实用。最后我直接捕获异常,刷新页面,解决最快最有效。

// vue-rotuer版本
"vue-router": "^4.0.3"

在这里插入图片描述
在这里插入图片描述

解决方案

在router/index.ts中添加router方法,路由异常刷新页面。

// 更新包后无法获取到最新的代码,需要特殊处理,重新加载页面
router.afterEach((to, from, failure) => {if (failure) {// ElMessage.warning('failure')location.reload()}
})
// 更新包后路由访问错误,重新加载页面,加载最新的chunk资源
router.onError(() => {// ElMessage.warning('onError')location.reload()
})

打包后的文件【记录】

// 避免页面缓存output: {filename: `js/[name].[chunkhash].${timeUpdate}.js`,chunkFilename: `js/[id].[chunkhash].${timeUpdate}.js`}

解决完成~~


http://www.mrgr.cn/p/14000250

相关文章

【2024年5月备考新增】《软考真题分章练习(含答案解析) - 18 管理科学-运筹学基础 (2)》

21、某种商品价格 P 变动与某指标 A 的变化具有很强的相关性,指标 A 的增长会导致 P 的降低,反之亦然。指标 A 和价格 P 的相关性系数是()。 A.0.18 B.0 C.0.98 D.-0.83 【答案】D 【解析】A 的增长会导致 B 的降低,反比关系,系数必然是一个负数。正比函数 y=kx,当 k>…

Golang(一):基础、数组、map、struct

目录 hello world 变量 常量,iota 函数 init函数和导包过程 指针 defer 数组和动态数组 固定长度数组 遍历数组 动态数组 len 和 cap 截取 切片的追加 map 四种声明方式 遍历map 删除 查看键是否存在 结构体 声明 作为形参 方法 封装 继承…

React Hooks 全解: 常用 Hooks 及使用场景详解

React Hooks 是 React 16.8 版本引入的一项重要特性,它极大地简化和优化了函数组件的开发过程。 React 中常用的 10 个 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect、useImperativeHandle 和 useDebugValue。这些…

Zotero插件ZotCard中AI-NNDL文献笔记卡分享及卡片使用方法

一、卡片社区分享 github:ZotCard插件AI-NNDL论文卡片模板 Issue #67 018/zotcard (github.com) 二、卡片效果预览 ZotCard插件AI-NNDL论文卡片模板是关于人工智能神经网络与深度学习论文的笔记卡片,效果预览如下图: 三、卡片代码 经过了…

安卓逆向 | 某X游戏垂类Web nonce

*本案例仅做分析参考,如有侵权请联系删除 1.逻辑分析 通过XHR断点,然后逐步往上调发现nonce生出处。 在console执行下函数 其中 i,是当前日期和时间的秒级时间戳,并将其向下取整到最接近的整数。 i = ~~(+_.w() / 1e3)w</

机器人坐标系转换之从世界坐标系到局部坐标系

三角函数实现 下面是代码c和python实现&#xff1a; #include <iostream> #include <cmath>struct Point {double x;double y; };class RobotCoordinateTransform { private:Point origin; // 局部坐标系的原点在世界坐标系中的坐标public:RobotCoordinateTransfo…

ReactRouter

React-Router 概念&#xff1a;一个路劲path对应一个组件component 当我们在浏览器中访问一个path的时候&#xff0c;path对应的组件会在页面中进行渲染路由语法&#xff1a; import {createBrowserRouter, RouterProvider} from react-router-dom// 1. 创建router实例对象并…

万字长文深入理解Docker镜像分层原理、容器数据卷、网络通信架构(Docker系列第2章,共3章)

镜像分层的简单直观体现 在执行docker pull时,会发现多个Pull complete 字样,就能体现分层,如果是一个文件,只会有一个Pull complete 。 docker pull redis Using default tag: latest latest: Pulling from library/redis a2abf6c4d29d: Already exists c7a4e4382001: Pu…

【Ambari】Ansible自动化部署大数据集群

目录 一&#xff0e;版本说明和介绍信息 1.1 大数据组件版本 1.2 Apache Components 1.3 Databases支持版本 二&#xff0e;安装包上传和说明 三&#xff0e;服务器基础环境配置 3.1global配置修改 3.2主机名映射配置 3.3免密用户名密码配置 3.4 ansible安装 四. 安…

在Windows上部署ArchLinux(WSL)

在Windows上部署ArchLinux(基于WSL)在开始前请确保你拥有一个Linux环境,以便于后续的步骤顺利地进行。ArchLinux大家应该用过,这个发行版属实需要折腾。但是Microsoft Store没有提供Arch Linux的WSL版本,所以,才有了这篇文章。2024年4月14日 补充: 微软商店确实有,但是…

读所罗门的密码笔记19_治理模式

读所罗门的密码笔记19_治理模式1. 解决方案 1.1. 全球人工智能的环境错综复杂,它严重依赖于价值观,且关系重大 1.2. 即使是与大家同仇敌忾的问题做斗争,也往往无法在国际社会中取得最佳效果 1.3. OPCW(禁止化学武器组织)已经帮助限制了化学武器的开发和部署,但没有协议是…

怎么防止文件被拷贝,复制别人拷贝电脑文件

怎么防止文件被拷贝&#xff0c;复制别人拷贝电,脑文件 防止文件被拷贝通常是为了保护敏感数据、知识产权或商业秘密不被未经授权的人员获取或传播。以下列出了一系列技术手段和策略&#xff0c;可以帮助您有效地防止文件被拷贝。 1. 终端管理软件&#xff1a; 如安企神、域智…

PVE下安装配置openwrt和ikuai

开端 openwrt 和 ikuai 是比较出名的软路由系统。我最早接触软路由还是因为我的一个学长要改自己家里的网络&#xff0c;使用软路由去控制网络。我听说后便来了兴致&#xff0c;也在我家搞了一套软路由系统。现在我已经做完了&#xff0c;就想着写个文章记录一下。 软路由简介…

Deutsch Lernen

Hallo.贴个德语键位表。

采集某新闻网资讯网站保存PDF

网址&#xff1a;融资总额近3亿美元、药明康德押注&#xff0c;这家抗衰老明星公司有何过人之处-36氪 想要抓取文章内容&#xff0c;但是找不到啊&#xff0c;可能是文字格式的问题&#xff0c;也可能文章内容进行了加密。 在元素中查看&#xff0c;window.initialState返回的就…

UT单元测试

Tips&#xff1a;在使用时一定要注意版本适配性问题 一、Mockito 1.1 Mock的使用 Mock 的中文译为仿制的&#xff0c;模拟的&#xff0c;虚假的。对于测试框架来说&#xff0c;即构造出一个模拟/虚假的对象&#xff0c;使我们的测试能顺利进行下去。 Mock 测试就是在测试过程…

[转帖]活久见,TCP连接互串了

https://plantegg.github.io/2020/11/18/TCP%E8%BF%9E%E6%8E%A5%E4%B8%BA%E5%95%A5%E4%BA%92%E4%B8%B2%E4%BA%86/ 背景 应用每过一段时间总是会抛出几个连接异常的错误,需要查明原因。 排查后发现是TCP连接互串了,这个案例实在是很珍惜,所以记录一下。 抓包 业务结构: 应用…

uniapp开发小程序手写板、签名、签字

可以使用这个插件进行操作 手写板-签名签字-lime-signature - DCloud 插件市场 但是目前这个插件没有vue3 setup Composition API的写法。所以对于此文档提供的可以直接使用,需要使用Composition API方式实现的,可以继续看。 因为Composition API方式,更加的简单、灵活,…

【Web】DASCTF 2023 0X401七月暑期挑战赛题解

目录 EzFlask MyPicDisk ez_cms ez_py 让俺看看401web题 EzFlask 进来直接给了源码 import uuidfrom flask import Flask, request, session from secret import black_list import jsonapp Flask(__name__) app.secret_key str(uuid.uuid4())def check(data):for i i…

ArcGIS Desktop使用入门(三)图层右键工具——标注要素、将标注转换为注记

系列文章目录 ArcGIS Desktop使用入门&#xff08;一&#xff09;软件初认识 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——标准工具 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——编辑器 ArcGIS Desktop使用入门&#xff08;二&#x…