vue: vite项目中报错：Uncaught ReferenceError: require is not defined

一，报错信息：

Uncaught ReferenceError: require is not defined
    at index.js:9:12

原因：

为什么会报这个错？

• Webpack（Vue CLI）支持旧的 CommonJS 规范，允许你在代码里使用 require() 来动态加载图片或模块。
• Vite 是基于现代浏览器的 ESM (ES Modules) 规范构建的，浏览器原生只认识 import，根本没有 require 这个方法。

当代码运行到浏览器里时，浏览器遇到 require 就会直接崩溃。

二，解决：

两种常见场景，请对号入座修改：

 

场景 A：使用 require 引入组件（路由懒加载）

错误写法（Webpack 旧语法）：

 

const Home = () => require('@/views/Home.vue')
// 或者
const Home = resolve => require(['@/views/Home.vue'], resolve)

 

正确写法（Vite / ESM 标准语法）：
请全部统一改用标准的 import() 动态导入：

 

const Home = () => import('@/views/Home.vue')

场景 B：使用 require 引入图片或静态资源

错误写法：

 

this.imgUrl = require('@/assets/logo.png')

 

正确写法：
在 Vite 中，静态资源可以直接通过顶部 import 引入，或者使用特殊的 new URL 语法：

 

// 方法 1：在文件顶部 import
import logoImg from '@/assets/logo.png'
this.imgUrl = logoImg

// 方法 2：动态路径（等价于以前的 require）
this.imgUrl = new URL('@/assets/logo.png', import.meta.url).href