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

相关推荐
臣妾没空2 小时前
里程碑5:完成框架npm包抽象封装并发布
前端·npm
icebreaker6 小时前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker6 小时前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
sudo_jin8 小时前
前端包管理器演进史:为什么 npm 之后,Yarn 和 pnpm 成了新宠?
前端·npm
codingWhat2 天前
前端组件库开发实践:从零到发布
前端·npm·vite
大米饭消灭者3 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
FliPPeDround4 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround4 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
吴声子夜歌4 天前
小程序——布局示例
小程序
码云数智-大飞4 天前
如何创建自己的小程序,码云数智与有赞平台对比
微信小程序