当前位置:   article > 正文

vue3 使用require报错:require is not defined

require is not defined

1.报错原因

vue3使用vite打包 里面没有require方法, webpack 里面有这个方法

2.解决方案

使用import 代替

*注:

资源可使用import.meta.globEager(“…/*.png”) ;
动态引入,需要给 css 路径加括号

vite官网静态资源处理 new URL(url, import.meta.url)
import.meta.url : ESM 的原生功能,会暴露当前模块的 URL
与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL

 function test(name) {
  return new URL(`../${name}.png`, import.meta.url).href
}
  • 1
  • 2
  • 3

在生产构建时,Vite 才会进行必要的转换(保证 URL 在打包和资源哈希后仍指向正确的地址)

注意这个 URL 字符串必须是静态的,这样才能分析
否则代码将被原样保留,因而在 build.target 不支持 import.meta.url 时会导致运行时错误

 Vite 不会转换这个
const url = new URL(imagePath, import.meta.url).href
  • 1
  • 2
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/86309
推荐阅读
相关标签
  

闽ICP备14008679号