【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. 在链表上实现 Partition 以及荷兰国旗问题

    在链表上实现 Partition 以及荷兰国旗问题 作者:Grey 原文地址: 博客园:在链表上实现 Partition 以及荷兰国旗问题 CSDN:在链表上实现 Partition 以及荷兰国旗问题 ...

  2. 学习ASP.NET Core Blazor编程系列十四——修改

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  3. python3小技巧总结(实时更新)

    1.列表解析 如果一个想将一个列表中的大于0的数字过滤,一般可能会用到lambd结合filter,或者就是直接遍历,不过最好的解决办法是这样: b = [1,0,-1,-2] a = [i for i ...

  4. 记录一次从linux移动一个项目到windows遇到的问题

    前言 这几天在linux平台写了一个垃圾软件,浪费了我10多天的时间,感觉很垃圾,然后我想在windows平台打包这个软件,然后出现了一个项目中有相同文件名的问题,导致一些文件相互覆盖 问题描述 我把 ...

  5. integer 拆箱装箱以及范围

    //装箱是将一个原始数据类型赋值给相应封装类的变量.而拆箱则是将一个封装类的变量赋值给相应原始数据类型的变量. int i1 = 1; int i2 = 1; Integer integer1 = n ...

  6. MySQL锁，锁的到底是什么？

    MySQL锁系列文章已经鸽了挺久了,最近赶紧挤了挤时间,和大家聊一聊MySQL的锁. 只要学计算机,「锁」永远是一个绕不过的话题.MySQL锁也是一样. 一句话解释MySQL锁: MySQL锁是解决资 ...

  7. 【Java EE】Day03 DQL、约束、数据库设计、范式、备份和还原

    〇.总结 1.DQL 聚合函数有空值需要使用ifnull函数 where不能使用聚合函数 分页开始索引的计算,及mysql和oracle的方言 2.约束 删除唯一约束DROP INDEX 列名; 3. ...

  8. bug处理记录：com.fasterxml.jackson.core.JsonParseException: Illegal unquoted character ((CTRL-CHAR, code 9)): has to be escaped using backslash to be included in string value at [Source:

    1. 报错: com.fasterxml.jackson.core.JsonParseException: Illegal unquoted character ((CTRL-CHAR, code 9 ...

  9. openpyxl写数据

    import osimport openpyxlos.chdir(r'D:/openpyxl') wb = openpyxl.Workbook() sht = wb.create_sheet('dat ...

  10. 使用JavaScript制作一个页面的电子时钟

    题目:做一个电子时钟,显示当前的年月日,时分秒,要求自动变化. 案例分析: 1.使用一个div盒子来展示时钟的内容: 2.将盒子在JavaScrip里面获取div盒子: 3.我们需要一个定时器setI ...