当前位置: 首页 > news >正文

【踩坑】Vue3项目正常跑动后页面空白问题

        近期踩了个坑,Vue3搭建的项目能够正常跑动,但是页面却是空白的,控制台也不报错,只留下一行警告:

        发现是 router 入口文件(一般是在 router 文件夹下的 index 里面)的写法和 vite 版本不匹配的问题。

        随着 Vite 版本的更新,一些 API 可能会发生变化或被弃用,这会导致在升级 Vite 或项目迁移时遇到兼容性问题。我遇到的问题正是因为 Vite 的版本更新导致了 import.meta.globEager 的使用方式变化。

2.x 版本的 vite

        如果你的 Vite 版本是 2.9.8 或类似的 2.x 版本,你应该使用 import.meta.globEager 来动态导入路由文件。这个 API 在 Vite 2.x 中是支持的,但需要注意它在更高版本中可能会被弃用。

import.meta.globEager() 直接引入所有的模块 Vite 独有的功能
const modules = import.meta.globEager("./routes/**.ts") as any; // vite 2.9.18 版本时需要换成这个

5.x 版本的 vite

        在 Vite 5.x 版本中,import.meta.globEager 已经被弃用,取而代之的是使用 import.meta.glob 并配合 { eager: true } 选项。你需要按以下方式修改你的代码:        

const modules = import.meta.glob("./routes/**.ts", {eager: true}) as any;  // Vite 5.33 版本时需要换成这个

        注意:因为在 globEager 方法在后续的 vite 版本中已经被弃用了,所以我们在 5.0 版本中使用它就有问题,同理,在 2.9.8 版本中使用 glob 也会有问题。所以在使用过程中需要特别注意。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 期权常用的价差策略!会用这个才算真的期权入门!
  • 第二章 数据访问:JPA
  • U盘管控软件|禁止拷贝怎么解决?防止U盘拷贝的6款专业软件推荐
  • 汽车功能安全--TC3xx之PBIST、MONBIST
  • 双指针的运用
  • 搭建监控面板(Netdata)
  • MT6895(天玑8100)处理器规格参数_MTK联发科平台方案
  • php实用命令
  • JAVA智听未来一站式有声阅读平台听书系统小程序源码
  • 九盾叉车U型区域警示灯,高效照明和安全警示
  • 为什么RAG对下一代AI开发至关重要
  • C++(十六) 继承 part2
  • 无线通信里的一些参数(dB dBm RSRP RSRQ RSSI SIN) / 天线增益
  • TD综合教程——粒子切换和音轮(附思路和工程文件)
  • 物联网之ESP32控制GPIO输出点亮LED、闪烁LED灯
  • (三)从jvm层面了解线程的启动和停止
  • gulp 教程
  • httpie使用详解
  • JavaWeb(学习笔记二)
  • linux学习笔记
  • Python 基础起步 (十) 什么叫函数?
  • SpiderData 2019年2月16日 DApp数据排行榜
  • Vue小说阅读器(仿追书神器)
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 深度学习入门:10门免费线上课程推荐
  • 实现菜单下拉伸展折叠效果demo
  • 视频flv转mp4最快的几种方法(就是不用格式工厂)
  • 阿里云服务器购买完整流程
  • ​力扣解法汇总1802. 有界数组中指定下标处的最大值
  • # Redis 入门到精通(七)-- redis 删除策略
  • #《AI中文版》V3 第 1 章 概述
  • #include<初见C语言之指针(5)>
  • (13)Hive调优——动态分区导致的小文件问题
  • (2024)docker-compose实战 (9)部署多项目环境(LAMP+react+vue+redis+mysql+nginx)
  • (delphi11最新学习资料) Object Pascal 学习笔记---第14章泛型第2节(泛型类的类构造函数)
  • (zt)基于Facebook和Flash平台的应用架构解析
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (第三期)书生大模型实战营——InternVL(冷笑话大师)部署微调实践
  • (附源码)apringboot计算机专业大学生就业指南 毕业设计061355
  • (附源码)php投票系统 毕业设计 121500
  • (九)c52学习之旅-定时器
  • (排序详解之 堆排序)
  • (四) Graphivz 颜色选择
  • (一)80c52学习之旅-起始篇
  • .net core 连接数据库,通过数据库生成Modell
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • .net FrameWork简介,数组,枚举
  • .NET Standard 的管理策略
  • .NET/C# 使用 ConditionalWeakTable 附加字段(CLR 版本的附加属性,也可用用来当作弱引用字典 WeakDictionary)
  • .net6 webapi log4net完整配置使用流程
  • .Net下的签名与混淆
  • ?php echo ?,?php echo Hello world!;?
  • @select 怎么写存储过程_你知道select语句和update语句分别是怎么执行的吗?
  • [ 数据结构 - C++]红黑树RBTree
  • [ 隧道技术 ] cpolar 工具详解之将内网端口映射到公网