一、问题描述

我用的是Vue2版本的uniapp项目,以下是Vant官方提供的安装方法,使用npm安装到uniapp项目中。
Vant官网:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart

在这里插入图片描述
安装完成得到以下模块

在这里插入图片描述

官方提供的引入单个组件的方案

在这里插入图片描述

我需要引入的是一个数字键盘组件

在这里插入图片描述

引入后运行出现报错:
chunk-vendors.js:23436 Uncaught ReferenceError: require is not defined

在这里插入图片描述

二、解决方案

1.在项目的根路径下创建vue.config.js文件

在这里插入图片描述

2.复制以下内容进去

module.exports = {
    chainWebpack: (config) => {
        config.module
        .rule("mjs$")
        .test(/.mjs$/)
        .include.add(/node_modules/)
        .end()
        .type("javascript/auto");
    },
};

在这里插入图片描述

3.保存,然后重新启动项目。

在这里插入图片描述

4.运行成功,vant2组件已成功引入。

在这里插入图片描述

三、Vant两种引入组件的方式(按需或全部)

在这里插入图片描述

四、不太建议uniapp项目使用vant!

vant官方本来就不支持uniapp,所以我们使用的时候会出现很多问题,比如用vue的vant,在小程序中会出现报错,TypeError: Cannot read property 'userAgent' of undefined 等等问题。

在这里插入图片描述

在打包成apk后打开是白屏的,因为vant组件的相关配置导致出现了问题。所以建议大家写uniapp项目的时候还是尽量少用vant了,不过有一些组件还是支持的!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐