微信小程序构建 npm 失败解决方法

更详细的内容，可以查看 微信小程序官方文档 - npm 支持。

本文主要以引入一个 UI 组件作为练习，熟悉 npm 操作，和如何解决报错问题。

引入 Vant Weapp UI 组件

Vant Weapp 快速上手

1. 通过 npm 安装

# 通过 npm 安装
npm i @vant/weapp

2. 修改 app.json

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

3. 修改 project.config.json

这个步骤在组件官网的手册文档中没有体现，在微信小程序 npm 手册也没有说明，是询问腾讯元宝得出的最佳引入配置。

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

默认配置时，miniprogram_npm 会被生成在项目根目录（即 package.json 所在的目录）。更推荐的方式是在 project.config.json 中配置以上内容。

那么 miniprogram_npm 会被生成在 miniprogram/ 目录下

project-root/
  ├── miniprogram/
  │   ├── miniprogram_npm/  ← 自定义生成在这里
  │   ├── pages/
  │   └── ...
  ├── package.json
  └── ...

📌为什么推荐 miniprogram_npm 放在 miniprogram/目录？

1. 符合小程序打包规则

   • 小程序编译时只会扫描 miniprogram/目录下的文件，如果 miniprogram_npm放在项目根目录，可能导致部分 npm 包无法被正确加载。

2. 避免路径问题

   • 如果 miniprogram_npm在根目录，而小程序代码在 miniprogram/，可能需要额外配置 paths或 alias，增加复杂度。

3. 官方推荐实践

   • 微信小程序官方示例和大部分脚手架（如 Taro、mpvue）都默认将 miniprogram_npm放在 miniprogram/下。

4. 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm。

5. 解决报错

拉取项目代码后，执行了 npm install ，执行构建 npm 一直报错，检查了一遍配置没有问题。（毕竟另外一台电脑就是构建运行成功才上传的代码）

微信社区也没找到什么解决方法。

清缓存，也没用。（才刚学习微信小程序开发没几天，就被清缓存和重启开发工具后错误就消失，坑过好几次）

于是想起来，重启开发工具！

果然！再次构建 npm，成功了！(｀ﾍ´)=3