vite+vue3中require is not defined问题及解决
更新时间：2023年05月17日 10:58:17 作者：我是粗心超人
这篇文章主要介绍了vite+vue3中require is not defined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vite+vue3中require is not defined
1.准备做一个走马灯，引入资源时提示require未定义，通过了解到vue3中没有这个，它属于别的模块也不咋清楚，也有特意去引入require的，但是对于我来说过程太繁琐了，我也不推荐那样去做，如下的方式就很简单
解决办法
通过vite官网了解到新的引入方式，我使用了其中一种，其他自行学习。
imgList: [
{
name: "lj",
src: new URL('../../assets/img/applyList.png', import.meta.url).href,
title: "这是lj.png"
},
{
name: "logo",
src: new URL('../../assets/img/applyList.png', import.meta.url).href,
title: "这是logo.png"
},
{
name: "bg",
src: new URL('../../assets/img/applyList.png', import.meta.url).href,
title: "这是bg.png"
},
{
name: "sadmas",
src: new URL('../../assets/img/applyList.png', import.meta.url).href,
title: "这是sadmas.png"
}
]犯了一个低级错误，样式height和width直接用=来赋值。导致图片不显示，还以为是URL未生效，
最后用指针看了一下，路径已经赋值好了，细一看发现宽高为0，恍然大悟。
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in imgList" :key="item">
<img :src="item.src" style="height: 40px;width: 40px;">
</el-carousel-item>
</el-carousel>
vite无法使用require,require is not defined
错误原因
require is not defined
node.js不是内置对象的一部分，如果想用typescript写Node.js，则需要引入第三方声明文件
vue无法识别require，执行命令：
npm install @types/node --save-dev
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue.js实例方法之生命周期的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
这篇文章主要介绍了vue中echarts自动轮播tooltip问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
下面小编就为大家分享一篇vue项目中的webpack-dev-sever配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要给大家介绍了关于Vue脚手架学习之项目创建方式的相关资料，文中通过介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了基于Vue2.0的分页组件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
在Vue2.x中，编写组件的方式是使用Options API，它的特点是在对应的属性中编写对应的功能模块，这篇文章主要介绍了Vue组合式API--setup中定义响应式数据详解,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了vue-router钩子执行顺序示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了vue引入js数字小键盘的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue基于input实现密码的显示与隐藏功能,文末给大家介绍了vue 如何实现切换密码的显示与隐藏效果，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-01-01
vue+Element-ui的el-table的多级内容渲染问题
这篇文章主要介绍了vue+Element-ui的el-table的多级内容渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论