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使用mint-ui实现下拉刷新和无限滚动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了浅谈实现vue2.0响应式的基本思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
本文主要介绍了浅谈Vue灰度发布新功能的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue如何使用vant组件的field组件disabled修改默认样式
这篇文章主要介绍了vue如何使用vant组件的field组件disabled修改默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下2023-11-11
vue-draggable-resizable-gorkys是一更强大的拖拽组件,可以随意拖拽,有点坐标,会议室拖拽布局排座是vue-draggable结合vue-draggable-resizable-gorkys进行开发的,本文重点给大家介绍vue实现会议室拖拽布局排座,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单，需要从后台获取七牛token上传图片到七牛，具体示例代码大家跟随小编一起学习吧2018-10-10
这篇文章主要介绍了Vue Router 实现登录后跳转到之前相要访问的页面,本文仅演示路由跳转和导航守卫相关代码的实现，不包含具体的权限验证和登录请求，需要的朋友可以参考下2022-12-12
Pinia 是一个基于 Vue 3 的状态管理库，可以更好地支持 TypeScript 和更灵活的状态管理方式，本文主要介绍了pinia的使用与持久化处理，需要的可以参考一下2023-07-07
这篇文章主要介绍了vue之将echart封装为组件，本文将会以雷达图为案例，一步步讲解在vue项目中如何使用echart，如何将其封装为能重复调用的组件2018-06-06
最新评论