Vue3在添加动态路由时，vite提示：you can use the /* @vite-ignore */ comment inside the import() call to suppress

最新推荐文章于 2024-07-01 14:14:36 发布
最新推荐文章于 2024-07-01 14:14:36 发布
阅读量922 收藏 2
点赞数 1
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43441710/article/details/129968336
版权
在使用Vue3和Vite4.2.0版本时，进行动态路由导入时遇到Vite警告。警告提示可以使用/*@vite-ignore*/注释来抑制该警告。这意味着在import()调用内部添加此注释可以消除关于动态导入的不必要的提醒。
摘要由CSDN通过智能技术生成

vue3 + vite4.2.0 动态路由导入时，vite发出敬告： you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

在这里插入图片描述
Vite发出警告：
在这里插入图片描述
需要加上/* @vite-ignore */才能消除警告；
在这里插入图片描述

千鹤之念
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite-plugin-vue-i18n:Vue I18n的快速插件
04-09
:globe_with_meridians: @ intlify / vite-plugin-vue-i18n Vue I18n的Vite插件 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的...
vite vue3 import.meta.glob动态路由
03-29
在Vue 3应用程序中，Vite提供了一种高效的方式来实现动态路由。Vite是一个由Vue.js作者尤雨溪开发的现代Web应用构建工具，它利用了ES模块的原生加载能力，提供了更快的开发环境启动速度和更简洁的配置。在Vite与Vue ...
vue+vite项目，动态导入静态资源的几种方式
关注前端，关注原创
02-06 2239
项目中遇到一个场景，页面的标题栏结构基本相同，只是图片需要动态改变，不同类型的页面，进入后，加载不同的图片。遇到问题，查官网。官网不懂，问博主。
vite 编译报错 /* @vite-ignore */ —动态引入组件报错（解决方法）
qq_42375485的博客
10-10 1930
vite 编译报错 /* @vite-ignore */ —动态引入组件报错（解决方法）
The above dynamic import cannot be analyzed by Vite.
最新发布
Vinca@的博客
07-01 869
`@rollup/plugin-dynamic-import-vars`的使用，`vite-plugin-dynamic-import`的使用，解决import(`${component}`)问题。
vite入坑之路：react+vite动态导入报错@vite-ignore的解决方法
江咏之
05-16 4762
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
vite动态引入报错，vite配置vue-router，封装动态导入控制台报错问题
weixin_45340607的博客
03-21 3648
意思是上面定义使用的_import动态导入函数不能被Vite分析出来，如果一定要这样使用的话，可以使用import ( )调用内部的/ * @ vite-ignore * / 注释来忽略此警告。后官网找到import.meta.glob,改写成这样也可以，但是感觉写路径挺麻烦，还是用第一种吧。随后我用了这个注释后，报错是没有了，但是所需的组件不能动态导入了显示空白。不过还是很好奇为什么第一种多加个路径就能动态导入，跪求大佬解释！然后组件就成功展示了。
vue 的 gitignore 文件
qq_40137978的博客
03-02 1867
vue上传项目到 git 库时，制定忽略的文件以及文件夹的内容。 .DS_Store node_modules/ /dist/ npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln
vue3-vite动态路由导入组件不能使用模板字符串的问题
jian_aidehua的博客
04-24 9020
vue3-vite 动态路由 动态导入组件 不能使用模板字符串的问题
webpack 迁移至 vite 注意事项 基于vue3+ts（持续汇总）
HHH917的博客
07-14 1682
require是node.js提供的模块 Webpack使用了node 使得编辑vue时可以使用require 但是vite不支持 而且图片在标签src中的路径不可以使用@ 别名获取绝对路径 css style中也不可以使用别名 ~@ 获取图片 文字等静态资源 替代方式 vite 静态资源处理 可以封装一个函数进行调用 根据不同的静态路径设置不同的函数 pub-use.ts 使用 pub-use.ts 2. 组件不传参时 props不可以设置为空 否则打包错误 错误示例 vite打包报错 Type ‘{
jiaminghi/data-view dataV for vite2 vue3 windows补丁 for npm/yarn
03-20
官网直接安装的不支持vite2+vue3的 主要修复： 1.build或者dev项目时不报错，兼容vite2，vue3； 2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm pnpm可通用...
jiaminghi/data-view dataV for vite2 vue3 windows补丁 for pnpm
03-19
官网直接安装的不支持vite2+vue3的 主要修复： 1.build或者dev项目时不报错，兼容vite2，vue3； 2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm pnpm可通用...
jiaminghi/data-view dataV for vite vue2 补丁 for npm/yarn
04-13
官网直接安装的不支持vite2/3+vue2的 主要修复： 1.build或者dev项目时不报错，兼容vite2/vite3，vue2； 2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm ...
oc的属性
diaoju3333的博客
06-06 98
Declared property A declared property provides a syntactical shorthand for declaring a class’s accessor methods and, optionally, implementing them. You can declare a property anywhere in the ...
vite + vue3 + web worker使用记录
xiao_cheng_的博客
09-13 6342
vue3使用web worker
VITE+VUE3动态导入组件
Lou_Lan的博客
09-22 6717
vite+vue3组件的动态导入方式
Vue3动态路由与路由守卫
z981832649的博客
07-28 1189
Vue3动态路由与路由守卫
踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
热门推荐
Alloom的博客
08-12 1万+
2021.8.12 坑50（vue-router4、addRoute()、router.options.routes未更新）：进行动态权限获取菜单的设置，使用了addRoute()来添加路由，但是router.options.routes未更新，依然只有原来的路由列表值。 相关API简要介绍： addRoute()，添加一条新的路由记录到路由，文档：API 参考 | Vue Router (vuejs.org) router.options.routes，应该添加到路由的初始路由列表，文档： AP.
// component: () => import(/* @vite-ignore */ `@/components${item.component}.vue`),vue3动态导入组件报错
06-13
在Vue3中使用Vite作为构建工具时，动态导入组件时会出现路径解析错误的问题。这是因为Vite默认只会解析`.vue`和`.js`文件，而对于其他文件类型需要手动配置。 为了解决这个问题，需要在`vite.config.js`中配置`resolve.extensions`选项，将需要解析的文件类型添加到其中。例如，如果需要解析`.scss`和`.less`文件，可以这样配置： ``` export default { resolve: { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss', '.less'] } } ``` 然后，在组件中使用动态导入时，需要在路径前添加`@vite-ignore`注释标识，告诉Vite忽略路径解析错误。例如： ``` component: () => import(/* @vite-ignore */ `@/components${item.component}`) ``` 这样，就能够解决在Vue3中使用Vite作为构建工具时动态导入组件报错的问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值