一、问题描述

我用的是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了,不过有一些组件还是支持的!

原文地址:https://blog.csdn.net/weixin_44912902/article/details/129114604

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_50156.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

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