uniapp项目引入vant2遇到报错Uncaught ReferenceError: require is not defined完美解决方案

news2024/12/29 10:40:00

一、问题描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/357950.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vision Transformer(ViT) 2: 应用及代码讲解

文章目录1. 代码讲解1.1 PatchEmbed类1)__init__ 函数2) forward 过程1.2 Attention类1)__init__ 函数2)forward 过程1.3 MLP类1)__init__ 函数2)forward函数1.4 Block类1)__init__ 函数2)forwa…

MATLAB曲线拟合工具箱

MATLAB曲线拟合工具箱一、MATLAB曲线拟合工具箱1.导出拟合后的曲线数据2.调用m文件中的函数3.显示5位有效数字二、参考链接一、MATLAB曲线拟合工具箱 1.导出拟合后的曲线数据 生成代码后,默认函数名为createFit,可以自行修改,直接保存&#…

Allegro如何重命名光绘操作指导

Allegro如何重命名光绘操作指导 在做PCB设计的时候,光绘设置是输出生产文件必要的流程,设置好光绘之后,如何对光绘重新命名,如下图 如何把L1改成TOP,L6改成BOTTOM,具体操作步骤如下 点击Manufacture选择Artwork

每天一道大厂SQL题【Day11】微众银行真题实战(一)

每天一道大厂SQL题【Day11】微众银行真题实战(一) 大家好,我是Maynor。相信大家和我一样,都有一个大厂梦,作为一名资深大数据选手,深知SQL重要性,接下来我准备用100天时间,基于大数据岗面试中的经典SQL题&…

【C++修炼之路】21.红黑树封装map和set

每一个不曾起舞的日子都是对生命的辜负 红黑树封装map和set前言一.改良红黑树的数据域结构1.1 改良后的结点1.2 改良后的类二. 封装的set和map2.1 set.h2.2 map.h三. 迭代器3.1 迭代器封装3.2 const迭代器四.完整代码实现4.1 RBTree.h4.2 set.h4.3 map.h4.4 Test.cpp前言 上一节…

epoll 笔记

maxevents 参数大小一般不超过64必须够了 maxevents 个事件,才会传到用户空间吗?可见,只要有事件就可以传到用户空间。一台服务器可以支撑多少个链接https://blog.csdn.net/mijichui2153/article/details/81331345 0、两台虚拟机的初始状态如…

数据库必知必会:TiDB(12)TiDB连接管理

数据库必知必会:TiDB(12)TiDB连接管理TiDB连接管理TiDB的连接特性连接TiDBMySQL命令行客户端图形界面客户端连接其他连接方式写在后面TiDB连接管理 TiDB的连接特性 TiDB Server主要负责接收用户的会话请求,接收SQL并负责SQL语句…

【2021/推荐/社交网络】Socially-Aware Self-Supervised Tri-Training for Recommendation

部分公式、图表和排版等显示可能异常,可在个人公众号(码农的科研笔记)进行全文免费阅读。 【2021/推荐/社交网络】Socially-Aware Self-Supervised Tri-Training for Recommendation 原文:https://dl.acm.org/doi/10.1145/3447548.3467340 源码:[伯乐 SEPT]、https://git…

Keychron K3 Pro键盘测评

目录 0.开箱 1.Keychron K3 Pro介绍 2.产品特点 2.1轻薄机身轴体解锁多场景办公 2.2 支持QMK/VIA开源改键蓝牙/有线双模客制化机械键盘 ​2.3支持MacOS/Windows系统秒切换不卡顿 2.4同时适配3台设备可快速切换 ​2.5支持QMK/VIA改键 2.6 超轻薄佳达隆矮轴,触感新体验 …

ChatGPT火爆来袭,携手参与为开源助力

前言: Hello大家好,我是Dream 。最近语言模型ChatGPT在网络上一阵大火,ChatGPT 以惊人的速度问世,在技术圈中引起了广泛讨论。在 GitHub 上近期还诞生了多个 ChatGPT 相关的开源项目,数量之多令人瞠目结舌,…

LeetCode142 环形链表Ⅱ

题目: 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评…

软考高级-信息系统管理师之人力资源管理(最新版)

人力资源管理目录 项目人力资源管理项目人力资源管理概念项目团队项目管理团队领导和管理冲突和竞争项目人力资源管理过程规划项目人力资源管理组建项目团队建设项目团队管理项目团队项目人力资源管理工具虚拟团队集中办公团队发展阶段人际关系技能权力冲突管理激励理论X理论和…

【python】数据分析案例

目录 一、项目内容: 第一步:获取评论数据 第二步:词频统计并可视化展示 第三步:绘制词云 二、项目实现: 第一步:获取评论数据 (1)导入python库 (2)获…

煤矿风险监测预警算法 YOLO

煤矿风险监测预警算法基于YOLO网络模型视觉分析,煤矿风险监测预警算法7*24小时不间断自动识别现场人员作业行为、着装合规情况以及传送皮带撕裂跑偏等风险异常情况。我们使用YOLO(你只看一次)算法进行对象检测。YOLO是一个聪明的卷积神经网络(CNN),用于实…

Hive 2.3.0 安装部署(mysql 8.0)

Hive安装部署 一.Hive的安装 1、下载apache-hive-2.3.0-bin.tar.gz 可以自行下载其他版本:http://mirror.bit.edu.cn/apache/hive/ 2.3.0版本链接:https://pan.baidu.com/s/18NNVdfOeuQzhnOHVcFpnSw 提取码:xc2u 2、用mobaxterm或者其他连接…

【拦截器、过滤器、springAop】那些不为人知的隐秘

首先说到这几个词的时候,大家肯定都很熟悉了,甚至觉得这几个的区别刚刚毕业都能回答了,但是我想大家在实际应用过程中是真得会真正的使用吗?换言之,什么时候用过滤器什么时候使用拦截器,什么时候使用spring…

Atlassian Server用户新选择 | Data Center产品是否适合您的企业?

2021年,Atlassian宣布停止销售新的Server许可证在业内引起轩然大波。就在今年2月,Atlassian所有Server产品及插件均已停售。2024年2月,也就是一年不到,Atlassian将终止对Server产品及插件的所有支持。 此公告发布后,许…

Flink-DataStream API介绍(源算子、转换算子、输出算子)

文章目录DataStream API(基础篇)Flink 支持的数据类型执行环境(Execution Environment)创建执行环境执行模式(Execution Mode)触发程序执行源算子准备工作从集合中读取数据从文件读取数据从 Socket 读取数据从 Kafka 读取数据自定…

Spring Cloud Nacos实战(三)- 服务消费者注册和负载均衡,服务注册中心对比

目录Nacos服务消费者注册和负载均衡服务消费者具体配置新建Modulepomyml主启动测试远程调用与Ribbon什么是Ribbon具体使用验证Nacos自带负载均衡Nacos服务注册中心对比提升各种服务注册中心对比CAP模型CP原则:一致性 分区容错性原则AP原则:可用性原则 …

Unity 基于Netcode for gameObjects实现局域网同步

注意事项: 1.需要将unity升级到2021.3及以后的版本的稳定版本,使用不稳定的2022版本测试过,存在打包问题: 效果: 所需Package: 1.Netcode for gameObjects 2.Multiplayer Tools 该package是附带Netcode…