Vue.js 中 “require is not defined“

解决 Vue.js 中 "require is not defined" 错误

当你在 Vue.js 项目中使用 require 时遇到 "require is not defined" 错误,这通常是因为你的项目使用了 Vue CLI 3+ 或 Vite,它们默认使用 ES 模块而不是 CommonJS 的 require 语法。

解决方案

方法 1:使用 ES 模块导入方式(推荐)

javascript

javascript 复制代码
import exampleImage from '@/assets/images/example.jpg';

export default {
  data() {
    return {
      imagePath: exampleImage
    }
  }
}

方法 2:使用 public 目录(适用于不需要构建处理的静态文件)

将图片放入 public 目录

直接引用:

html

javascript 复制代码
<img src="/images/example.jpg" alt="Example Image">

方法 3:配置构建工具支持 require

对于 Vue CLI 项目:

确保你的项目有 @vue/cli-service 依赖

Webpack 已经配置了支持 require

对于 Vite 项目:

Vite 默认不支持 require,你需要:

使用 import.meta.glob 或 import.meta.globEager:

javascript

javascript 复制代码
const images = import.meta.glob('@/assets/images/*.{jpg,png,svg}')

// 或者动态获取
const getImage = (name) => {
  return new URL(`/src/assets/images/${name}`, import.meta.url).href
}

方法 4:动态 URL(Vite 推荐方式)

javascript

javascript 复制代码
export default {
  data() {
    return {
      imagePath: new URL('../assets/images/example.jpg', import.meta.url).href
    }
  }
}

为什么会出现这个错误?

现代构建工具趋势:Vue CLI 3+ 和 Vite 默认使用原生 ES 模块

环境差异:require 是 Node.js 的 CommonJS 语法浏览器环境不支持

构建配置:如果你的项目没有正确配置 Webpack 的 require 支持

最佳实践建议

对于新项目,使用 ES 模块的 import 语法 对于动态路径,使用 Vite 的 import.meta.glob 或 new

URL() 方式 如果必须使用 require,确保你的构建工具配置正确

相关推荐
胡gh2 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh2 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴2 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_2 小时前
TailWind CSS
前端·css·postcss
烛阴3 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧3 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment4 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点5 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile5 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年5 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel