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.JS入门教程之列表渲染
这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
vue项目热更新的坑及解决
这篇文章主要介绍了vue项目热更新的坑及解决方案，具有很好的参考价值，希望对的大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue3中vite使用sass的配置方法
这篇文章主要介绍了vue3中vite使用sass的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
vue 设置proxyTable参数进行代理跨域
这篇文章主要介绍了vue 设置proxyTable参数进行代理跨域的相关资料，及代理跨域的概念原理,需要的朋友可以参考下
2018-04-04
element的el-table自定义最后一行的实现代码
最后一行要显示一些其他结果,用的是element ui 自带的数据总计的属性；返回一个数组,会按下标进行展示,这篇文章主要介绍了element的el-table自定义最后一行的实现代码,需要的朋友可以参考下
2024-03-03
vue2.0 资源文件assets和static的区别详解
这篇文章主要介绍了vue2.0 资源文件assets和static的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
Vue和relation-graph库打造高质量的关系图应用程序
这篇文章主要介绍了Vue和relation-graph库打造高质量的关系图应用程序,在这篇文章中,我们深入探讨了如何使用Vue和relation-graph高效打造关系图,我们详细介绍了数据准备、关系映射、点击事件等关键步骤,需要的朋友可以参考下
2023-09-09
Vue开发之watch监听数组、对象、变量操作分析
这篇文章主要介绍了Vue开发之watch监听数组、对象、变量操作,结合实例形式分析了vue.js使用Watch针对数组、对象、变量监听相关操作技巧,需要的朋友可以参考下
2019-04-04
详解Vue实战指南之依赖注入(provide/inject)
这篇文章主要介绍了详解Vue实战指南之依赖注入(provide/inject)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue elementUI下拉框值无法选中问题及解决方案
大家在写系统的时候,会有这样的需求：点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框,展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了,下面给大家分享vue elementUI下拉框值无法选中问题,感兴趣的朋友一起看看吧
2024-03-03