【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. layui的图片上传使用

    先上效果图. 在用之前呢,你得先更新最新版的layui版本.经验之谈_(:_」∠)_ 今天在用的时候,实在是碰到太多的坑,本来是拒绝更新到最新版来着. 首先是layui.js和layui.all.js ...

  2. Python: 对程序做性能分析及计时统计

    1.对整个程序的性能分析 如果只是想简单地对整个程序做计算统计,通常使用UNIX下的time命令就足够了. (base) ➜ Learn-Python time python someprogram. ...

  3. 函数调用时用const保护指针

    当调用函数并且把指向变量的指针作为参数传入时,通常会假设函数将修改变量(否则,为什么函数需要指针呢?).例如,如果在程序中看到语句 f(&x); 大概是希望f改变x的值.但是,f仅需检查x的值 ...

  4. 【Day04】Spring Cloud 升华篇：容器化技术docker和kurbernetes

    一.介绍 1.要考虑的问题 微服务数量有很多 中间件的部署-nacos-server sentinel-server 如何部署多个服务和中间件? 2.存在问题---机器上直接解压使用 资源利用率的问题 ...

  5. 基于MATLAB的人民币识别系统

    1.选图背景 随着科技的发展,图像识别技术在计算机视觉领域起着越来越重要的作用,现已被应用到金融.军事.公安刑侦.生物医学.机器视觉等各个领域: 随着国民经济的快速发展,人民币大量流通市场,商业交易都 ...

  6. django.core.exceptions.ImproperlyConfigured: Application labels aren't unique, duplicates: rest_framework_swagger

    在启动服务时报django.core.exceptions.ImproperlyConfigured: Application labels aren't unique, duplicates: re ...

  7. jquerylib表单

    用jquerylib,实现表格添加内容和删除内容 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  8. C#代码扫描工具Sonarqube + Win10+SqlServer2017

    在之前的公司, 看到有用过代码扫描工具, 扫描C#代码, 最近公司也有考虑做这个,于是我便独自研究了一下,这里给大家做个分享 网上找了很多资料, 主要有以下问题: 1. Sonarqube用的是 旧版 ...

  9. pyCharm中下载包的速度慢的解决方案

    1.解决方案 使用阿里镜像 2.具体步骤 1.在项目里面新建一个xxx.py文件 2.然后将下面的代码复制进xxx.py文件 import os ini = "[global]\nindex ...

  10. 第六节 FAF与GP不工作保护区的绘制

    飞行程序设计软件实践 前一篇文章中,通过风标设计2023插件,我们在CAD中绘制了FAP方式下的精密进近保护区. 接着这个话题我们继续来看一下FAF方式下的保护区应该怎样绘制,以及OAS参数的其它用法 ...