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 CLI 3.x 自动部署项目至服务器的方法
本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx。非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04
vue 接口请求地址前缀本地开发和线上开发设置方式
这篇文章主要介绍了vue 接口请求地址前缀本地开发和线上开发设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
关于vue 结合原生js 解决echarts resize问题
这篇文章主要介绍了关于vue 结合原生js 解决echarts resize问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
使用vue3指令封装一个图片预览功能
这篇文章主要为大家详细介绍了如何使用 vue3 指令封装一个后台管理系统图片预览功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
使用vue封装一个自定义样式的滚动条
众所周知,当容器高度固定而内容部分高度超出容器高度时,浏览器会渲染出一个可以滚动并用于显示剩余界面的条 -- 滚动条,它可以简单的样式修改,但是位置是固定的,无法移动,而我们需要改变位置的时候,它就不能满足我们的需求了,这时我们可以自己手写一个
2023-10-10
vue实现鼠标悬浮框效果
这篇文章主要为大家详细介绍了vue实现鼠标悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
今天很郁闷，遇到这样一个奇葩问题，使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错误，折腾半天才解决好，下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案分享给大家，需要的朋友一起看看吧
2018-05-05
从零开始搭建vue移动端项目到上线的步骤
这篇文章主要介绍了从零开始搭建vue移动端项目到上线的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin
这篇文章主要介绍了如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10