一、问题描述

我用的是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,所以我们使用时候出现很多问题比如vuevant,在小程序中会出现报错TypeError: Cannot read property 'userAgent' of undefined 等等问题

在这里插入图片描述

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注