《Vite 基础知识》Vite 不支持 require 解决方案(三种情况/require is not defined)

前言

首先,Vite 中没有 require 相关方法,因为它默认支持 ESM 方式加载模块!

所以,我们要理清如下两个方法

方法 require()

方法 require.context()

Vite 提供解决方案,请接着往下看!

解决方案

require() 加载模块

报错 require 未定义

Uncaught (in promise) ReferenceError: require is not defined

js 复制代码
// 报错。CommonJS 方式加载
initNav() {
	const ElementResizeDetector = require('element-resize-detector');
	const erd = ElementResizeDetector();
}

解决方案

  • 使用 EMS import() 方法;
  • 注意 require()同步加载;
  • import()异步 加载,推荐使用 await 命令。当然也可以使用 then() 方法,因为其返回 Promise 对象;
js 复制代码
// 正确。方式一(推荐):ESM 方式加载,使用 await 命令
async initNav() {
	const ElementResizeDetector = await import('element-resize-detector');
	const erd = elementResizeDetectorMaker.default();
}


// 正确。方式二:ESM 方式加载,使用 then() 方法
initNav() {
	import('element-resize-detector').then(module => {
        const erd = module.default();        
    }).catch(err => {
        console.error('加载失败');
    });
}

require() 加载图片

报错 require 未定义

Possible Unhandled Promise Rejection: ReferenceError: require is not defined

vue 复制代码
<template>
	<img class="pwd-icon" :src="pwdIcon" >
</template>
<script>
export default {
	data () {
		return {
			pwdIcon2: require('../assets/images/pwd-icon.png'),
		}
	}
}
</script>

解决方案

使用 EMS import 命令;

vue 复制代码
<template>
	<img class="pwd-icon" :src="pwdIcon" >
</template>
<script>
import PwdIcon from '../assets/images/pwd-icon.png'
export default {
	data () {
		return {
			pwdIcon: PwdIcon,
		}
	}
}
</script>

require.context() 批量加载文件

报错 require 未定义

Possible Unhandled Promise Rejection: ReferenceError: require is not defined

js 复制代码
// require 是同步加载
const modulesFiles = require.context('./src/components', true, /\.vue$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    modules[moduleName] = modulesFiles(modulePath).default;
    return modules;
}, {});

解决方案

使用 import.meta.glob ,可异步同步 加载。详见《Vite 基础知识:使用 Glob 动态加载 .vue 文件》

js 复制代码
// 异步,返回 Promise 对象
const modules = import.meta.glob('./src/components/**/*.vue');

for (const path in modules) {
    modules[path]().then((mod) => {
        console.log(path, mod.default);
    })
}

// 同步,配置参数 { eager: true }
const modules = import.meta.glob('./src/components/**/*.vue', { eager: true });

for (const path in modules) {
    console.log(path, modules[path].default);
}
相关推荐
charlee446 小时前
nginx部署发布Vite项目
nginx·性能优化·https·部署·vite
墨菲安全7 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
Modify_QmQ11 小时前
leaflet【十一】地图瓦片路径可视化
gis·vue3·leaflet·leafletmapblock
csdn_aspnet17 小时前
Node.js 使用 WebSockets 和 Socket.IO 实现实时聊天应用程序
node.js
whhhhhhhhhw20 小时前
Node.js核心API(fs篇)
node.js
聪聪的学习笔记20 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
GDAL1 天前
Node.js v22.5+ 官方 SQLite 模块全解析:从入门到实战
数据库·sqlite·node.js
RunsenLIu1 天前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
Allen_zx1 天前
Elpis - 基于 Koa + Vue3 的企业级全栈应用框架
node.js
鹏程1 天前
局域网下五子棋,html+node.js实现
node.js·html