【小程序】云开发模式使用 npm 安装 vant 问题

一、在 miniprogram 文件夹内 初始化 生成 package.json 文件

 进入 终端 后输入命令 npm init  生成自定义 package.json 文件

 或者 输入命令 npm init -y 生成默认 pageage.json 模板

 完成后 miniprogram 目录下会 多出 一个 package.json 文件

二、根据 vant 官方文档步骤操作

1、下载vant依赖

npm i @vant/weapp -S --production

2、修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3、修改 project.config.json

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

注意：

packageJsonPath ： 指的是你 package.json 文件放置的位置

miniprogramNpmDistDir： 指的是你构建之后生成的构建文件放置的位置

4、构建 npm 包 （先勾选，后构建）

三、可能会遇到的问题

1、构建 npm 时 提示找不到 package.json 文件

此时需要修改 project.config.json 中 packageJsonPath 的路径

2、构建成功，并且组件引入成功，但开发者工具上仍然不能显示

经测试，手机预览可以正常看到vant组件的效果，但开发者工具不能正常显示

现在时间 2021/11/12 （以后可能会被修复）

经过排查发现是因为调试基础库的问题

将调试基础库的版本调整至 2.20.0 及以下 开发者工具即可正常预览