【vite】踩坑，首次点击路由跳转页面，发生回退，页面闪回，二次点击才能进入目标页面

最近在做移动端前端项目，使用的vite3+vue3+vant，组件和api挂载，使用的自动导入，unplugin-auto-import/vite和unplugin-vue-components/vite。

在vite.config.ts配置好后，并自动在src生成了components.d.ts与auto-imports.d.ts文件。

后续开发过程中，发现了问题，当每次修改过代码，合并拉取后，首次进入某个页面的路由，点击时，首先会跳转想目标路由，然后发生闪退，回到原页面，二次点击才能跳转过去

查阅了许多资料，一直没找到问题，后续查看日志，vite日志打印了page reload src/components.d.ts的信息，发现页面进行了重载

后面在一篇文章中找到了解决方案

方法一

更改components.d.ts与auto-imports.d.ts生成文件的路径，放置在根目录下，非src

方法二

删除components.d.ts与auto-imports.d.ts这两个文件，vite.config.js配置中，剔除掉dts的配置

参考文献：https://zhuanlan.zhihu.com/p/530626295

【vite】踩坑，首次点击路由跳转页面，发生回退，页面闪回，二次点击才能进入目标页面的更多相关文章

  1. 在做nav-bar部分点击路由跳转相同地址时，控制台报错问题。

    报错信息: Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: &qu ...

  2. mpvue实现微信小程序（欢迎踩坑）

    最近刚使用mpvue完成了微信小程序的开发,写点东西,做个记录. 首先依旧是两个传送门: 微信小程序文档:[https://developers.weixin.qq.com/miniprogram/d ...

  3. 关于elementUi tab组件路由跳转卡死问题

    好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi   后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...

  4. Easyui下的点击回车键跳转到下个控件

    在Easyui框架下,JavaScript 中的 onKeyDown事件居然失效了.所以使用了另外的函数去实现点击回车键跳转到下个控件. /** * 点击回车键跳转到下个控件; * @param ol ...

  5. 【React踩坑记二】react项目实现JS路由跳转

    这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...

  6. vue路由使用踩坑点：当动态路由再使用路由name去匹配跳转时总是跳转到根路由的问题

    闲话少说,直接问题: 之前我的路由时这么写的 { path:'/serverInfo/:id', name:'serverInfo', component:() => import('@/vie ...

  7. WebForm路由踩坑 ajax请求多次

    WebForm路由踩坑 再次接触Asp.Net WebForm已是4年后的今天,源起新入职的公司,一个老的项目. Web接触的少,那就多动手写写. WebForm1.aspx <body> ...

  8. 后端路由项目由 gulp 改为 webpack 的踩坑实录

    前言 公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录. gulp 先来说说原来的架构. ...

  9. react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路

    一.react-navigation的初使用 createStackNavigator  ==> createSwitchNavigator  ==>  createAppContaine ...

  10. router路由去掉#！的踩坑记

    项目中在研究去掉router#!的过程中的踩坑过程.

随机推荐

  1. Crony 一个基于Go语言实现的分布式定时任务管理平台

    crony - 分布式定时任务管理平台 1. 基本介绍 1.1 项目背景 项目中存在许多定时任务,很多代码写法都是采取见缝插针式的写法或者直接丢到task服务里面写,存在以下问题 服务多实例时执行定时 ...

  2. ADPCM(自适应差分脉冲编码调制)的原理和计算

    关于ADPCM ADPCM(Adaptive Differential Pulse Code Modulation, 自适应差分脉冲编码调制) 是一种音频信号数字化编码技术, 音频压缩标准G.722, ...

  3. day18 批量查询与模糊查询 & 聚合函数与内置函数 & distinct关键字 & 分页查询limit & 排序order

    day18 两个表student和user student id s_name s_age s_sex user id u_name u_age u_sex 批量插入 insert into stud ...

  4. Zabbix技术分享——使用Zabbix6.0监控业务日志

    企业日常IT运维过程中,常会碰到需要监控业务日志的情况,以下将介绍如何使用Zabbix6.0监控业务日志. 应用场景描述: 企业IT运维部门使用自建zabbix平台对公司某业务系统进行了监控.近段时间 ...

  5. 深度剖析 | 【JVM深层系列】[HotSpotVM研究系列] JVM调优的"标准参数"的各种陷阱和坑点分析（攻克盲点及混淆点）「 1 」

    [易错问题]Major GC和Full GC的区别是什么?触发条件呢? 相信大多数人的理解是Major GC只针对老年代,Full GC会先触发一次Minor GC,不知对否?我参考了R大的分析和介绍 ...

  6. 注意看，她叫小美，在地址栏输入URL地址后发生了什么？

    注意看,这个用户叫小美,他在地址栏输入了一串URL地址,然后竟然发生了不可思议的事情! 01.输入URL发生了什么? 从输入URL开始,到页面呈现出来,简单来说分为四个步骤: ① 建立连接:建立与服务 ...

  7. python安装过程

    1.在官网下载,点击进入安装包. 2.把Add勾上,会自动配置环境变量. 3,这些是要下载的东西,要全部勾上. 4.这里特别注意路径,把路径改成自己想放的盘里面. 5.配置环境变量,在此电脑搜索 编辑 ...

  8. LeetCode-02 两数相加（Add Two Numbers）

    描述 给出两个非空的链表用来表示两个非负的整数.其中,它们各自的位数是按照逆序的方式存储的,并且它们的每个节点只能存储一位数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和. 您 ...

  9. @Transactional事务回滚异常：Transaction rolled back because it has been marked as rollback-only

    问题描述 事务设置手动回滚:TransactionAspectSupport.currentTransactionStatus().setRollbackOnly() 代码需要返回比较友好的提示,但t ...

  10. 迁移学习（JDDA） 《Joint domain alignment and discriminative feature learning for unsupervised deep domain adaptation》

    论文信息 论文标题:Joint domain alignment and discriminative feature learning for unsupervised deep domain ad ...