vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vite+vue3中require is not defined

vite+vue3中require is not defined问题及解决

作者:我是粗心超人

这篇文章主要介绍了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

总结

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

您可能感兴趣的文章:
阅读全文