vue3.0+vite2.0踩坑日记之动态路由导入The above dynamic import cannot be analyzed by vite.

最新推荐文章于 2023-08-20 15:09:56 发布
最新推荐文章于 2023-08-20 15:09:56 发布
阅读量1w 收藏 10
点赞数 4
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29733191/article/details/123858460
版权 
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations 
for supported dynamic import formats. If this is intended to be left as-is, 
you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

在这里插入图片描述
在编写vue动态路由导入时发现vite一直警告，写完之后页面也报错便想来解决；
查找一波之后发现vite+vue3只有用 defineAsyncComponent 才能拼接成功 不然会一直报错找不到模块 ；加上defineAsyncComponent 之后需要加上/* @vite-ignore */才能消除警告；
在这里插入图片描述
确实是个坑，使用wepack不会有这种问题；

编程打杂烩
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vite-vue3-admin：基于vite2.0 + vue3.0 + ant-design-vue2.0 +打字稿挂钩
03-03
vue3-antd基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0的后台管理系统模板账号：admin，密码：123456系统模块数据是从先前获取来的真实数据，路由也是从内部动态获取的，而只是通过内网穿透提供访问的，难免发生...
vue3+vite2警告提示The above dynamic import cannot be analyzed by vite问题,vite中import动态引入
张大娃创业笔记
07-09 1万+
在vue3+vite2构建项目中使用import动态引入时会报如下示例和警告： /** * 转化路由component实例化本地文件 * @param routes asyncRoutes */ export function filterAsyncRoutes(routes) { const res = [] routes.forEach(route => { let tmp = { ...route } if (tmp.children) {
The above dynamic import cannot be analyzed by Vite.
weixin_44815800的博客
08-09 1591
The above dynamic import cannot be analyzed by Vite.
【vue3】vue3+vite动态导入路由出现The above dynamic import cannot be analyzed by Vite
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
09-29 1337
如果有不懂可以留言，我看到了应该会回复。踩坑不易，还希望各位大佬支持一下。评论，你的意见是我进步的财富！vite官方文档说，需要使用。使用glob导入实例。如有错误，请多多指教。
【已解决】Vite 无法分析出动态 import 的类型, 控制台出警告
无言非影的博客
08-20 3265
这个错误是因为 Vite 无法分析出上面动态 import 的类型,因为它是以变量的形式,而不是字面量形式写的。因为我需要动态引入, 所以我使用第二种方式忽略警告,因为路径需要动态生成,无法写成字面量。在main.ts中需要自动注册全局组件。将动态导入路径改写为字面量,如。忽略这个 warning。忽略这个 warning。
Vite创建的Vue3项目，如果下载node modules后出现The above dynamic import cannot be analyzed by vite，不显示3000，浏览器打开方法
weixin_72322475的博客
05-07 433
cmd中想要yarn dev打开Vite创建的Vue3项目，cmd中出现：The above dynamic import cannot be analyzed by vite. ... If this is intended to be left as-is, you can use the /* @vite-ignore */ c，并且没有显示3000,在浏览器查看这个项目效果的方法
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
vite5+vue3+ import.meta.glob动态导入vue组件
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
使用了Vue3.0全家桶、ant-design-vue2.0和typescript4.0，实践vue3.0的新特性
Vue3.0+Vite开发
04-19
Vue3.0+Vite开发
vite动态引入报错，vite配置vue-router，封装动态导入控制台报错问题
weixin_45340607的博客
03-21 3560
意思是上面定义使用的_import动态导入函数不能被Vite分析出来，如果一定要这样使用的话，可以使用import ( )调用内部的/ * @ vite-ignore * / 注释来忽略此警告。后官网找到import.meta.glob,改写成这样也可以，但是感觉写路径挺麻烦，还是用第一种吧。随后我用了这个注释后，报错是没有了，但是所需的组件不能动态导入了显示空白。不过还是很好奇为什么第一种多加个路径就能动态导入，跪求大佬解释！然后组件就成功展示了。
vue动态路由懒加载报错问题
wzp6010625的博客
04-25 1562
一般路由配置是这样的，用import实现懒加载 export default new Router({ // mode: "history", base: "/meizu-shop/", routes: [ {path: "/home", component: ()=> import('@/views/Home'), name: "home" },...
vue动态路由异步加载import组件，加载不到module的问题
热门推荐
Cooky的博客
08-12 3万+
报错信息应该是这样的 webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10) 路由信息由后端给出，那么前端需要动态加载路由，同时component的路径也是后端给出，但是动态加载该路径会报错 如： // 假如path = '@/views/use...
vite入坑之路：react+vite动态导入报错@vite-ignore的解决方法
江咏之
05-16 4420
The above dynamic import cannot be analyzed by Vite. See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ c
vue3使用路由小坑（Failed to resolve component: router-view）
枫ゞ的博客
02-08 2185
出现问题： 在Vue3项目中使用路由时，如果app.mount("#app")的使用在app.use(router)前面时 会导致页面渲染不出，如下所示： import { createApp } from "vue"; import App from "./App.vue"; import router from "../src/router"; const app = createApp(App); app.mount("#app"); app.use(router); 解决办法： 必须
vue3-vite动态路由导入组件不能使用模板字符串的问题
jian_aidehua的博客
04-24 8392
vue3-vite 动态路由 动态导入组件 不能使用模板字符串的问题
Python优秀项目 基于Flask+MySQL实现的玩具电子商务网站源码+部署文档+数据资料.zip
05-25
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 Python优秀项目 基于Flask+MySQL实现的玩具电子商务网站源码+部署文档+数据资料.zip 1、代码压缩包内容 代码的项目文件 部署文档文件 2、代码运行版本 python3.7或者3.7以上的版本；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细） 3、运行操作步骤 步骤一：将代码的项目目录使用IDEA打开（IDEA要配置好python环境） 步骤二：根据部署文档或运行提示安装项目所需的库 步骤三：IDEA点击运行，等待程序服务启动完成 4、python资讯 如需要其他python项目的定制服务，可后台私信博主（注明你的项目需求） 4.1 python或人工智能项目辅导 4.2 python或人工智能程序定制 4.3 python科研合作 Django、Flask、Pytorch、Scrapy、PyQt、爬虫、可视化、大数据、推荐系统、人工智能、大模型
人脸识别例子，利用python调用opencv库
最新发布
05-25
人脸识别例子
densenet模型-基于深度学习对手势方向识别-不含数据集图片-含逐行注释和说明文档.zip
05-25
densenet模型_基于深度学习对手势方向识别-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,是将数据
vue3.0+vite路由
05-01
Vue3.0和vite都是JavaScript技术领域的热门话题，而在Vue3.0中，vite路由也是一个备受关注的新特性。vite是一个构建工具，旨在优化开发流程和生产时的编译速度。它与Vue3.0集成非常紧密，可以轻松地创建新项目并使用其路由功能。 在Vue3.0应用中，vite路由通过Router API来实现。Router API包含了一系列函数和属性，使得路由的配置变得非常简单。使用Router API，开发者们可以轻松地定义路由、导航、路由加载以及路由转换等功能，同时还能够享受到vite带来的高效建设体验。 vite路由的另一个显著特点是它支持懒加载。懒加载是一种非常流行的技术，因为它可以缩短首次加载的时间和减少资源的消耗。在vite路由中，可以定义多个不同的懒加载方式，例如按需加载、按分块加载等。这样一来，开发者们可以根据具体需求选择最适合的懒加载方法，提高应用的性能和用户体验。 总的来说，vite路由是Vue3.0生态系统中的一部分，它提供了一种新的、高效的路由处理方式，能够使开发者们更快速地构建出复杂的Web应用。如果你正在开发Vue3.0应用，不妨试试vite路由，相信它一定会带来不少惊喜。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程打杂烩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值