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

一、问题描述

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