前言

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

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

方法 require()

  • Node.JS 原生方法 ,以 CommonJS 方式加载模块/文件/图片

  • Webpack 默认支持 ,Vite 不支持;

方法 require.context()

  • Webpack 特定方法,此方法可实现自定义上下文;
  • Vite 不支持;

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

解决方案

require() 加载模块

报错 require 未定义

Uncaught (in promise) ReferenceError: require is not defined

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

解决方案

  • 使用 EMS import() 方法;
  • 注意 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

export default {data () {return {pwdIcon2: require('../assets/images/pwd-icon.png'),}}}

解决方案

使用 EMS import 命令;

import PwdIcon from '../assets/images/pwd-icon.png'export default {data () {return {pwdIcon: PwdIcon,}}}

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;}, {});

解决方案

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

// 异步,返回 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);}