关于微信小程序开发vant2 area-list报错问题

许久许久没有更新了，没办法项目写不完，空闲时间只想休息。。

临时更新是因为今天碰到一个vant2插件问题，浪费了我整整一个小时啊。。。为了记住这个坑，特意花点时间记一下。

首先根据官方原文

全局引入

"usingComponents":{"van-area":"@vant/weapp/area/index"}

然后直接使用

这里没问题，还是原汁原味，然后关于这个arealist就出了问题，我相信大家引用这个组件都是不愿意写一堆省市区数据，那么引入他官方的数据就很有必要了，我们附上他的官方文档方法：

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过@vant/area-data引入。

yarn add @vant/area-data

引入

import { areaList } from '@vant/area-data';Page({ data: { areaList, },});

这里就出了问题，显示MiniProgramError @vant/area-data，我是小白，我第一个反应是woc路径错误。改了许久我寻思好像不是啊，那哪除了问题啊。重申一遍我是小白，第二个反应就是百度，找了半个多小时没找着有用的东西。但是，功夫不负有心人，终于找到一个类似的方法，虽然没有解释原因，但也提供了方法。

我们在已经下载好的area-data里，把index.esm.mjs文件拷出来，然后反手炸了文件夹（删除）。然后我们打开终端，输入

[email protected]

静静等待（这个有点慢，反正我等了半天），ok以后我们在node-module里找到area-data，把拷出来的文件粘贴进去，改名成xxx.js（我是改成了data.js），我记得下载好的文件夹里好像也有哥data.js来着，不用管直接覆盖。这里我们就可以把文件夹之家剪切回我们的miniprogram_npm/@vant下面，然后更改引用路径

import{ areaList }from'../../miniprogram_npm/@vant/area-data/data';

这时候报错就木有了，唉。所以说啊官方文档也不一定全是对的，真的难顶。这里再贴一下原作者的帖子，毕竟我是看了人家的方法：vant-weapp Area 省市区选择的使用及遇到的坑_liuye066的博客-CSDN博客_vant省市区选择