【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. 2. 第一个PyQt5 程序 Helloword!

    专栏地址 ʅ(‾◡◝)ʃ 第一个 PyQt5 程序 2.1 import sys from PyQt5.QtWidgets import QApplication,QWidget app = QApp ...

  2. Google地图瓦片

    1.Web墨卡托空间参考 1.1.什么是Web墨卡托 墨卡托投影,又称正轴等角圆柱投影,由荷兰地图学家墨卡托(G.Mercator)于1569年创拟.假设地球被套在一个圆柱中,赤道与圆柱相切,然后在地 ...

  3. GitHub上的一个笔记相关小项目

    就是一个笔记屑小项目, C++编写,有想一起开发的私信 AlgorithWeaver/V-note (github.com) 项目名V-note QVQ

  4. 【Java】FileUtils-获取路径的所有文件（或文件夹）

    一.获取指定路径下的所有Excel文件 package com.boulderaitech.utils; import java.io.File; import java.util.Arrays; p ...

  5. 使用VMware安装Linux(CentOS)操作系统

    使用VMware安装CentOS 6.4 环境:Windows7 , VMware Workstation10, CentOS6.4 为什么选择CentOS ? 主流: 目前的Linux操作系统主要应 ...

  6. 项目完成小结 - Django-React-Docker-Swag部署配置

    前言 最近有个项目到一段落,做个小结记录. 内容可能会多次补充,在博客上实时更新哈~ 如果是在公众号阅读这篇文章,可以点击「查看原文」访问最新版本~ 这个项目是前后端分离,后端为了快,依然用我的Dja ...

  7. ast在爬虫上的应用

    https://astexplorer.net/ https://zhuanlan.zhihu.com/p/371710865 1.基础了解 const {parse} =require(" ...

  8. Crane如何做到利用率提升3倍稳定性还不受损？

    作为云平台用户,我们都希望购买的服务器物尽其用,能够达到最大利用率.然而要达到理论上的节点负载目标是很的,计算节点总是存在一些装箱碎片和低负载导致的闲置资源.下图展示了某个生产系统的CPU资源现状,从 ...

  9. 创建第一个WebService项目

    前提: 保证联网的情况下创建webservice实例,需下载依赖jar 一.创建WebService服务端 1.创建服务端的工程 2.创建javaee的WebServices服务 3.命名server ...

  10. 精华推荐 | 【深入浅出RocketMQ原理及实战】「性能原理挖掘系列」透彻剖析贯穿RocketMQ的事务性消息的底层原理并在分析其实际开发场景

    什么是事务消息 事务消息(Transactional Message)是指应用本地事务和发送消息操作可以被定义到全局事务中,要么同时成功,要么同时失败.RocketMQ的事务消息提供类似 X/Open ...