微信云开发小程序如何添加npm包，引入vant-weapp后出现[‘vant-XXX‘]:‘@vant/weapp/xxx‘未找到，错误解决

1、传统的微信小程序可以参考官方文档进行引入

Vant Weapp - 轻量、可靠的小程序 UI 组件库

2、微信云开发小程序引入

因为云开发小程序的项目结构发生变化，重要的是 云函数文件夹、小程序项目代码文件夹、 project.config.json配置文件

按照官方文档的引入方式，project.config.json进行如下配置

    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],

其中packageJsonPath配置对应的是npm包安装生成的的package.json文件路径，如果直接在项目的根目录执行 npm i 进行包安装，会导致node_modules直接和miniprogram文件夹同级，这一配置不会影响项目，因为还没有构建npm，下面我们构建一下看看

在工具栏构建npm之后，会在同级文件生成miniprogram_npm文件夹，

再通过左侧的方式引入就会报错无法找到文件目录，报错中可以看到访问路径是/miniprogram/miniprogram_npm/@vant/weapp/search/index

说明以下几点

• 构建npm后生成新的miniprogram_npm包文件夹存放构建后的包文件
• 微信小程序获取npm包资源是通过miniprogram_npm包文件夹进行包的访问
• miniprogramNpmDistDir配置对应的就是miniprogram_npm包文件夹存放的路径
• @vant/weapp/...对应的访问路径是/miniprogram/miniprogram_npm/

所以要想正确的在云开发的小程序中进行引入需要进行如下操作

1、npm包也就是node_modules安装在项目的根目录和/miniprogram/文件夹下都是可以的，但是必须要packageJsonPath配置一致

根目录配置是     "./package.json"

/miniprogram/文件下配置是     "/miniprogram/package.json"

2、miniprogramNpmDistDir配置对应miniprogram_npm包文件夹存放的路径，由于组件引入的访问路径，所以构建npm后该放在/miniprogram/文件路径下

对应配置为     "/miniprogram/"