Vue3项目require引入css文件报错:require is not defined问题及解决
更新时间：2025年12月06日 09:10:21 作者：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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中如何监听url地址栏参数变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vue中的Slot对于编写可复用可扩展的组件是再合适不过了,下面这篇文章主要给大家介绍了关于Vue插槽slot详细介绍的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
Canvas是HTML5中新增的元素,专门用来绘制图形,下面这篇文章主要给大家介绍了关于Vue使用Canvas生成随机大小且不重叠圆的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了Vue Cli 3项目 使用融云IM实现聊天功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
在看这篇文章的几点要求：需要你先知道Vuex与Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vuex与Vue-Router的基本使用后再回来看这篇文章2022-11-11
什么是vue.js事件处理器？这篇文章主要介绍了vue.js事件处理器的相关资料2017-03-03
这篇文章主要为大家详细介绍了如何使用vue实现视频全屏切换的功能,文中的示例代码讲解详细, 具有一定的借鉴价值,有需要的小伙伴可以参考一下2023-11-11
这篇文章主要介绍了Vue.js 中的实用工具方法，本文是小编日常开发中常用的一些工具方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue相关配置文件详解及多环境配置的教程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
本篇文章主要介绍了利用VUE框架，实现列表分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-01-01
最新评论