vue3中require报错require is not defined问题及解决

更新时间：2023年06月08日 09:38:28 作者：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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现点击追加选中样式效果
今天小编就为大家分享一篇vue实现点击追加选中样式效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue登录功能实现全套详解(含封装axios)
登录功能对于前端刚入门不久的同学来说较为困难,下面这篇文章主要给大家介绍了关于Vue登录功能实现(含封装axios)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
Vue.js中动态更改svg的相关属性详解
这篇文章主要为大家介绍了Vue.js中动态更改svg的相关属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue之ele多级联组件的使用方法详解
这篇文章为大家详细主要介绍了vue之ele多级联组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
vue .sync修饰符的使用详解
这篇文章主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
VUE子组件向父组件传值详解（含传多值及添加额外参数场景）
这篇文章主要给大家介绍了关于VUE子组件向父组件传值（含传多值及添加额外参数场景）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue-cli脚手架build目录下utils.js工具配置文件详解
这篇文章主要介绍了vue-cli脚手架build目录下utils.js工具配置文件详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue的状态管理模式vuex
本篇文章主要介绍了深入理解vue的状态管理模式vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
Vue3+Element Plus使用svg加载iconfont的处理方法
这篇文章主要介绍了Vue3+Element Plus使用svg加载iconfont的解决方案,本文详细介绍了如何在Element Plus中使用iconfont，简单的说就是要将其封装成SVG，并且支持动态修改颜色，需要的朋友可以参考下
2022-08-08
vue中阻止click事件冒泡,防止触发另一个事件的方法
下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02