[微信小程序] 项目引入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即可

相关推荐
Evaporator Core1 小时前
微信小程序数据绑定与事件处理:打造动态交互体验
微信小程序·小程序·交互
bubusa~>_<13 小时前
解决npm install 出现error,比如:ERR_SSL_CIPHER_OPERATION_FAILED
前端·npm·node.js
流烟默14 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
天下皆白_唯我独黑15 小时前
npm 安装扩展遇到证书失效解决方案
前端·npm·node.js
~欸嘿15 小时前
Could not download npm for node v14.21.3(nvm无法下载节点v14.21.3的npm)
前端·npm·node.js
家里有只小肥猫16 小时前
uniApp小程序保存canvas图片
前端·小程序·uni-app
低代码布道师17 小时前
性格测评小程序10生成报告
低代码·小程序
科技小E17 小时前
EasyRTC:基于WebRTC与P2P技术,开启智能硬件音视频交互的全新时代
网络·网络协议·小程序·webrtc·p2p·智能硬件·视频监控
^^为欢几何^^19 小时前
npm、pnpm和yarn有什么区别
前端·npm·node.js
乔冠宇19 小时前
微信小程序中将图片截图为正方形(自动居中)
微信小程序·小程序·typescript·uniapp