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,确保你的构建工具配置正确

相关推荐
网安Ruler2 分钟前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队
!win !7 分钟前
免费的个人网站托管-Cloudflare
服务器·前端·开发工具
饺子不放糖11 分钟前
基于BroadcastChannel的前端多标签页同步方案:让用户体验更一致
前端
饺子不放糖13 分钟前
前端性能优化实战:从页面加载到交互响应的全链路优化
前端
Jackson__13 分钟前
使用 ICE PKG 开发并发布支持多场景引用的 NPM 包
前端
饺子不放糖13 分钟前
前端错误监控与异常处理:构建健壮的Web应用
前端
cos18 分钟前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css
饺子不放糖20 分钟前
CSS的float布局,让我怀疑人生
前端
阳光是sunny36 分钟前
走进AI(1):细说RAG、MCP、Agent、Function Call
前端·ai编程
剪刀石头布啊1 小时前
var、let、const与闭包、垃圾回收
前端·javascript