Vite-不支持-require-解决方案三种情况require-is-not-defined
目录
Vite 不支持 require 解决方案（三种情况/require is not defined）
前言
首先，
Vite
中没有
require
相关方法，因为它默认支持
ESM
方式加载模块！
所以，我们要理清如下两个 方法 ：
方法 require()
- ，以
CommonJS方式加载 模块/文件/图片 ； - ，
Vite不支持；
方法 require.context()
- ，此方法可 ；
Vite不支持；
但
Vite
提供解决方案，请接着往下看！
解决方案
require() 加载模块
报错 require 未定义
Uncaught (in promise) ReferenceError: require is not defined
// 报错。CommonJS 方式加载
initNav() {
const ElementResizeDetector = require('element-resize-detector');
const erd = ElementResizeDetector();
}解决方案
- 使用 方法；
- 注意
require()是 同步 加载； import()是 异步 加载，推荐使用await命令。当然也可以使用then()方法，因为其返回Promise对象；
// 正确。方式一（推荐）：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
<template>
<img class="pwd-icon" :src="pwdIcon" >
</template>
<script>
export default {
data () {
return {
pwdIcon2: require('../assets/images/pwd-icon.png'),
}
}
}
</script>解决方案
使用 命令；
<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
// 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;
}, {});解决方案
使用 ，可 异步 和 同步 加载。详见
// 异步，返回 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);
}