vue3中require报错require is not defined问题及解决
作者：Web_Lys
这篇文章主要介绍了vue3中require报错require is not defined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3 require报错require is not defined
vue2中使用
const path = require("path")
const files = require.context("../module", true, /\index.vue$/)
files.keys().forEach(key => {
const name = path.dirname(key).slice(2)
that.$options.components[name] = require('../module/' + name).default
})vue3使用方法
vue3继续使用上面方法会报错 具体细节未深究
解决方案：
import.meta.globEager("../../assets/authentication/*.png") vue3项目require引入css文件报错：require is not defined
1.用 import 代替 require，如果是在 if 语句里动态引入，别忘了给 css 路径加括号。
2.vite官网静态资源处理 new URL(url, import.meta.url)
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。
将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：
const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！
这个模式同样还可以通过字符串模板支持动态 URL：
function getImageUrl(name) {
return new URL(`./dir/${name}.png`, import.meta.url).href
}在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。
然而，这个 URL 字符串必须是静态的，这样才好分析。
否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。
// Vite 不会转换这个 const imgUrl = new URL(imagePath, import.meta.url).href
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。