Vue3项目require引入css文件报错:require is not defined问题及解决
作者：acheding
Vue3项目中使用require引入CSS文件报错,建议使用import替代,对于动态引入,确保路径正确,Vite官网推荐使用new URL(url, import.meta.url)来处理静态资源,该方法可在现代浏览器中原生使用,在生产构建时,Vite会进行必要的转换以保证URL的正确性
Vue3项目require引入css文件报错
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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。