Vite+Vue3+UnoCSS打包报错Rollup failed to resolve import “virtual:uno.css“ from “E:/code/xxx/src/main.ts“

最新推荐文章于 2025-05-08 17:24:59 发布
最新推荐文章于 2025-05-08 17:24:59 发布
阅读量136 收藏
点赞数 7
分类专栏： 2025开发必备(限时特惠) 文章标签： 前端 unocss报错 unocss打包报错 Rollup failed virtual uno.css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41961749/article/details/147771528
版权

Vite+Vue3+UnoCSS打包报错Rollup failed to resolve import “virtual:uno.css” from “E:/code/xxx/src/main.ts”.

vite vue3 unocss 打包报错 virtual:uno.css 无法解析？vite.config.ts 配置才是关键！

在这里插入图片描述

最近在一个项目中加上了 UnoCSS，开发环境一切正常，结果一打包直接炸了：

[vite]: Rollup failed to resolve import
了解本专栏 订阅专栏 解锁全文
vite打包报错 Rollup failed to resolve，原因是高版本找不到依赖/node_modules的里面的文件
qq_57583768的博客
10-27 7018
vite打包报错 Rollup failed to resolve，原因是高版本找不到依赖/node_modules的里面的文件
hbx/uni3/vite/微信小程序 接入unocss
weixin_41792662的博客
12-18 1483
hbx/uni3/vite/微信小程序 接入unocss
解决Rollup failed to resolve import “xxx“ from “xxx“报错
热门推荐
qq_31013993的博客
12-07 1万+
ERROR[vitel: Rollup failed to resolve import "xxx’from "xxx". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to 'build rollupOptions.external'
从0到1，带你搭建Vite+Vue3+Pinia+Naive UI后台（四） - 完结篇
xxxzzzqqq_的博客
03-17 1178
说好的路由篇，怎么变成完结篇了？是这样的，本来计划这篇只写路由的，后来构思的时候发现路由篇的前置和关联知识实在太多了，我觉得权限这一块和路由一起讲比较好，但是讲到权限，那登录肯定也少不了吧，涉及到登录那axios封装自然也少不了喽，封装好了axios那么mock也要集成进来，索性就把剩下部分全讲了吧，就当是把之前拖更的补上吧。最后总结出这一篇具体讲以下几块内容常用工具类封装axios封装mock集成路由集成Pinia集成登录页路由守卫（权限等）警告！！
《从零开始学习Vite》 第二章：接入 CSS 工程化方案
vettel的博客
05-24 1185
CSS 方案是前端工程化必不可缺的，在最原始的开发阶段都是手写原生的 CSS，但原生 CSS 存在浏览器兼容问题、开发体验差、样式污染、打包产物体积过大等诸多问题，因此社区出现了不少 CSS 工程化解决方案，有CSS 预处理器、CSS Modules、PostCSS 、CSS in JS 和 CSS 原子化框架，下面我们将在 Vite 中落地这些 CSS 工程化方案。
vue3细节的改变以及unocss 原子化
汉堡请不要欺负面条
07-11 2074
vue3在vue2中细节的变化
UnoCSS
徐同保的专栏
08-09 298
UnoCSS
D32 Vue2 + Vue3 K124-K143
intmain404的博客
02-12 522
Vue学习
vue3学习笔记
webtly的博客
07-15 1188
vue3笔记记录
【常用组件整理】
Lcc的博客
11-20 1037
常用组件整理
Web 页面中“加载中”交互设计：从骨架屏到乐观更新
Lets_You_Know的博客
05-06 661
深入解析 Web 页面中“加载中”状态的交互设计，系统梳理 Skeleton、Spinner、乐观更新等常见方案，帮助开发者提升页面响应感与用户等待体验。
基于WebUI的深度学习模型部署与应用实践
Programming Talk
05-06 328
随着深度学习技术的快速发展，如何将训练好的模型快速部署并提供友好的用户交互界面成为许多AI项目落地的关键。WebUI(Web User Interface)作为一种轻量级、跨平台的解决方案，正被广泛应用于各类AI模型的部署场景。本文将详细介绍基于Python生态构建WebUI的技术方案，包含完整的代码实现，并探讨在实际项目中的应用实践。本文详细介绍了基于Gradio构建深度学习WebUI的完整流程，从基础实现到生产部署，涵盖了实际项目中的关键技术和优化方案。二、基于Gradio的模型部署实践。
Odoo 开发：揭秘表单视图中“添加行”按钮的出现条件
Min_Xiansen的博客
05-06 762
列表必须是嵌套在表单视图中，用于显示one2many或many2many字段的。isX2Many为 true)嵌套的<tree>或<list>标签必须明确设置或。不为 false)Odoo 的访问控制权限必须允许当前用户创建相关模型的新记录，并且 XML 视图定义（如或<control>的配置）没有明确阻止创建。canCreate为 true)只有这三个条件都满足时，ListRenderer 的 QWeb 模板才会渲染出那个包含“Add a line”链接的<tr>
空值运算符最佳实践清单（适用于 Vue 项目）
字节叔叔
05-07 50
建议理由优先使用?替代深层&&判断更清晰、简洁展示用户数据或接口返回值时配合??提供默认值防止界面空白或崩溃表单初始值统一使用??''处理避免 uncontrolled 警告在 computed / methods 中统一处理空值逻辑保持模板整洁编写公用函数封装复杂的空值获取提升代码复用性。
前端获取流式数据并输出
weixin_45016440的博客
05-08 72
在一些实时对话、日志推送等场景下，如果使用传统一次性加载数据的方式，可能会出现等待时间较长的不友好交互，这个时候我们需要使用流式布局分段获取数据，渐进式加载，减少等待焦虑。getReader()获取流数据，new TextDecoder()转换二进制数据，循环读取分段数据，直到done结束。原生js上，我们使用fetchAPI进行流式处理。
38.前端代码拆分
m0_74672734的博客
05-06 230
因为前端代码之前是一体编写的，所以为了方便对代码进行了拆分。其实还有点别扭需要后续再调整。
动态计算el-table高度
qq_50879110的博客
05-08 118
form、搜索框、底部导航栏设置class。mian.js 引入全局。
Babylon.js学习之路《一、初识 Babylon.js：什么是 3D 开发与 WebGL 的完美结合？》
最新发布
weixin_40252368的博客
05-08 886
开源、高性能的 Web 3D 引擎，基于 TypeScript/JavaScript。核心目标：简化 WebGL 开发
解决：前后端跨域请求
等什么君！的博客
05-04 724
协议（http/https）、域名（example.com）、端口（:8080）三者完全相同才视为同源。
vite + vue3 报 Error: Unknown variable dynamic import: ../views/layout/DefaultView.vue
07-14
如果你在使用 Vite + Vue 3 的项目中遇到了 "Error: Unknown variable dynamic import" 错误，这可能是因为 Vite 默认情况下不支持动态导入。 Vite 是一个基于 ES 模块的开发服务器，它使用了现代浏览器的原生模块导入功能。尽管动态导入（dynamic import）是 ECMAScript 的一项功能，但在 Vite 中需要进行额外的配置才能支持。 为了解决这个问题，你可以按照以下步骤进行操作： 1. 确保你的 Vite 版本是最新的，因为较旧的版本可能不支持动态导入。可以使用 `npm outdated vite` 命令来检查是否有可用的更新。 2. 在你的 Vite 项目根目录下创建一个 `vite.config.js` 文件（如果尚未创建）。 3. 在 `vite.config.js` 文件中添加以下配置： ```javascript export default { optimizeDeps: { include: [&#39;vue&#39;, &#39;vue-router&#39;, &#39;vue-i18n&#39;] } } ``` 上述配置的作用是将 Vue 相关的模块添加到 Vite 的优化依赖项中，以确保它们可以正确地进行动态导入。 4. 重启你的 Vite 开发服务器，然后尝试重新运行你的应用程序，看是否仍然出现 "Error: Unknown variable dynamic import" 错误。 通过以上步骤，你应该能够在 Vite + Vue 3 项目中正确地使用动态导入功能。如果问题仍然存在，你可以查看 Vite 的文档或在相关社区中寻求帮助，以获取更详细的支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

代码简单说

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

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

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

打赏作者

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

抵扣说明：

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

余额充值