Vite版本从2.6.x升级到2.7.x之后,Vant从3.3.0升级到3.3.(1-n)之后,项目构建时报错
某次升级一下项目中的部分依赖:
Vite 从 2.6.x 升级到了 2.7.x
Vant 从 3.3.0 升级到了 3.3.7
(注:Vant3.3.0与Vite2.7.x一块使用并build时是可以成功的,但Vant的版本在向上动一点就会报错)
报错信息:
[vite]: Rollup failed to resolve import "/home/homework/node_modules/vant/lib/vant/es/config-provider/style" from "src/helper/vant.ts".
比较奇怪的是,虽然构建时会failed,但对dev环境并没有可见的影响。。。
一开始没有发现是什么原因导致的,后面一次检查中,发现最新的Vite在配置第三方UI组件样式按需加载的方式细节有调整。
原有(build failed)
import styleImport from 'vite-plugin-style-import'; //// codes ... vueJSX(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), //// codes ...
新版(success)
import styleImport, { VantResolve } from 'vite-plugin-style-import'; //// codes... vueJSX(), styleImport({ resolves: [VantResolve()], libs: [ { libraryName: 'vant', esModule: true, resolveStyle: component => `/node_modules/vant/es/${component}/style/index`, }, ], }), //// codes...
按照“新版”的方式去配置vite.config,就可以解决Vant3.3.1及以上版本(Vite2.7.x)build项目代码失败的问题了
分类:
JavaScript
, Vite
标签:
JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 【杂谈】分布式事务——高大上的无用知识?