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

总结

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

您可能感兴趣的文章:

cordova+vue+webapp使用html5获取地理位置的方法
这篇文章主要介绍了
2019-07-07
vue2.x双向数据绑定原理解析
双向数据绑定原理主要运用了发布订阅模式来实现的，通过Object.defineProperty对数据劫持，触发getter，setter方法，这篇文章主要介绍了vue2.x双向数据绑定原理,需要的朋友可以参考下
2023-02-02
解决VantUI popup 弹窗不弹出或无蒙层的问题
这篇文章主要介绍了解决VantUI popup 弹窗不弹出或无蒙层的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
超级详细的Vue安装与配置教程
Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-06-06
基于vue和react的spa进行按需加载的实现方法
这篇文章主要介绍了基于vue和react的spa进行按需加载,需要的朋友可以参考下
2018-09-09
vue组件入门知识全梳理
这篇文章主要给大家介绍了关于vue组件入门知识的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
Vue中实现过渡动画效果示例代码
这篇文章主要介绍了Vue中实现过渡动画效果示例代码,Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果，需要的朋友可以参考下
2022-08-08
Vue修改Dom不生效的解决
这篇文章主要介绍了Vue修改Dom不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue恢复初始数据this.$data,this.$options.data()解析
这篇文章主要介绍了vue恢复初始数据this.$data，this.$options.data()解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vuex-persist 使用场景分析
Vuex-Persist 是一个用于在 Vuex 中实现持久化状态的库,它可以用来解决应用程序在刷新浏览器或关闭页面后丢失 Vuex store 中状态的问题,本文给大家介绍vuex-persist 可以用来干什么,感兴趣的朋友一起看看吧
2023-11-11