[微信小程序] 项目引入vant组件库 npm构建问题 避坑

按照Vant Weapp官网的快速上手,构建npm时发现报错

问题:package.json 未找到

原因:没有初始化npm,所以没生成package.json,npm构建时需要此文件,所以报此错误

解决:在项目根目录里执行 " npm init "

再次构建npm,还会报错,此时按照vant官方文档 再次执行即可:

复制代码
npm i @vant/weapp -S --production

如果还是没有成功,检查两个地方

javascript 复制代码
# 项目根目录下的 app.json 是否删除了这行代码

"style": "v2" // 这行代码要删掉,vant官方文档中解释了具体原因
javascript 复制代码
# 项目根目录下的 project.config.json
"packNpmRelationList": [
  {
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./"  // 将这里改成./就行了,程序会自动生成miniprogram
  }
]

至此,问题解决

再次点击 工具 / 构建npm即可

相关推荐
游九尘27 分钟前
在小程序中实现横竖屏切换的配置方法,实时监听页面宽度
小程序
weixin_lynhgworld31 分钟前
[特殊字符]旧物焕新颜,二手变宝藏——小程序系统开发开启绿色生活新篇章[特殊字符]
小程序·生活
说私域32 分钟前
小程序电商运营中“开源AI智能名片链动2+1模式S2B2C商城小程序”对培养“老铁”用户的重要性研究
人工智能·小程序·开源
weixin_lynhgworld42 分钟前
[特殊字符]短剧小程序:解锁碎片时间,畅享无限娱乐[特殊字符]
小程序·娱乐
2501_9159184143 分钟前
介绍如何在电脑上查看 iPhone 和 iPad 的完整设备信息
android·ios·小程序·uni-app·电脑·iphone·ipad
2501_916008891 小时前
没有 Mac 如何在 Windows 上创建 iOS 应用描述文件
android·macos·ios·小程序·uni-app·iphone·webview
FinClip17 小时前
微信AI小程序“亿元计划”来了!你的APP如何一键接入,抢先变现?
前端·微信小程序·app
菜鸟学习成功之路-李飞20 小时前
免费开源一款作文批改小程序模版,下载即可二开
小程序·开源
说私域20 小时前
电商价格战下的创新破局:定制开发开源AI智能名片S2B2C商城小程序的应用与价值
人工智能·小程序·开源
week_泽20 小时前
小程序云函数全面总结笔记_5
笔记·小程序