【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. 如何在kali Linux上安装VMware Tools

    作用: 1.让虚拟机和本地上的文件可以互传,直接拖动就可以实现转接 2.可在虚拟机上执行本地脚本 3.本地时钟与虚拟机同步 4........... 方法: 1.运行虚拟机 2.在上方菜单栏中点击安装 ...

  2. Vue使用axios请求接口返回成功200但是进入到catch中

    发生这个问题时查阅了许多资料,没有一个是对得上的.最后发现原来是在请求拦截器中的错误 错误代码如下 // 添加响应拦截器 axios.interceptors.response.use(functio ...

  3. 【Devexpress】Gridcontrol列标题换行

    gridView1.OptionsView.AllowHtmlDrawHeaders = true; gridView1.ColumnPanelRowHeight = 35; GridColumn g ...

  4. 系统内置APK并签名并配置AndroidStudio

    前言 最近在集成内置APK的时候遇到了些问题,遂整理一份文档以记录. 一,APP内置进系统固件 将APK源码或编译出的apk文件放在package或vendor等目录下,并且编写相应的android, ...

  5. springboot接收前端传参的几种方式

    1.通过HttpServletRequest接收,常用于获取请求头参数以及Cookie,适用于GET 和 POST请求方式,以下两种方式: @GetMapping("/demo1" ...

  6. K8S 核心组件 kubelet 与 kube-proxy 分析

    kubelet kubelet 进程用于处理master 下发的任务, 管理pod 中的容器, 注册 自身所在的节点. 节点管理 启动参数说明 --register-node #如果设置为true 则 ...

  7. 基于EasyCode定制Mybatisplus全自动单表实现：新增/批量新增/修改/批量删除/分页查询/ID查询

    基于EasyCode定制Mybatisplus全自动单表实现CRUD接口 分页查询 ID查询 新增 批量新增 修改 批量删除 注意使用了MybatisPlus的自动填充功能,和insertBatchS ...

  8. 大数据HDFS凭啥能存下百亿数据？

    欢迎关注大数据系列课程 前言 大家平时经常用的百度网盘存放电影.照片.文档等,那有想过百度网盘是如何存下那么多文件的呢?难到是用一台计算机器存的吗?那得多大磁盘啊?显然不是的,那本文就带大家揭秘. 分 ...

  9. ABP AutoMapper与自定义Mapping

    对象映射 在工作中,需要将相似的对象映射到另一个对象,这样我们来看一个最繁琐的映射方式 例: public class UserAppService : ApplicationService { pr ...

  10. python 实现RSA公钥加密，私钥解密

    from Crypto.PublicKey import RSA from Crypto.Cipher import PKCS1_v1_5 as Cipher_pkcs1_v1_5 from Cryp ...