总结 在Vue 3 + Vite项目中,遇到require报错通常是因为Vite不支持CommonJS的require语法。解决方案包括使用ES6的import语法替代require,以及使用new URL()处理静态资源。如果问题仍然存在,建议检查Vite配置或第三方库/插件的兼容性。
一、在第一次使用vue3开发项目时,使用require(‘图片路径’),结果浏览器报错: Uncaught (in promise) ReferenceError: require is not defined 1、因为require是webpack提供的一种加载能力,但是vue3项目时搭配vite的,所以这里应该用vite提供的静态资源载入方法, 官方文档:https://vitejs.cn/guide/assets.html#the-...
将require is not defined错误的包fork到自己仓库 安装browserify npm install browserify 项目增加build/browserify.js(按照对应项目调整代码) const pkg = require('../package.json'); const browserify = require('browserify'); const camelCase = require('lodash.camelcase'); const fs = require('fs')...
} 刚开始没有配置references,配置type仍然报错,后来看一篇文章对比作者的ts.config.json.发现没有references,添加之后就不报错了,后来volar蹦了一次,我将type&references注掉之后,require居然也不报错了。。。 记录一下~
vue3 如果使用的是typescript开发,就会出现require引入图片报错,require is not defined 不能像使用vue2 这样imgUrl: require(’…/assets/test.png’) 导入,是因为typescript不支持require 所以用import导入,下面介绍如何解决: 使用await import(’@/assets/img/22.png’); ...
如果使用 composition API 的话,那么可以这样做: import {computed} from 'vue' const getRankingBg = computed(() => { if (this.ranking <= 3) { return require(`@/static/images/ranking-${this.ranking}.png`) } return require('@/static/images/ranking-other.png')}) 0 回复 收起回答 相似...
但在vue3中的vite没有require方法定义的使用,说白了就是不使用require方法进行资源的导入,而是使用新的方法。详情请看官网。 Vite官网 我这里提供两种方法: 方法1:import导入资源 使用import导入资源 import { ref } from "vue"; import source from "@/assets/28fc29c767c3dc8c75fbe6b284b5de1e.jpeg"; cons...
环境不一样,在webpack.config.js里面使用require是node环境,在你的案例里面使用require是浏览器环境,浏览器中没有require,所以会报错; 疑问点在于为什么可以在.vue文件中使用require不会报错,因为.vue文件会经过编译之后再投入使用,编译的过程也是node环境,所以有require; 如果要在浏览器环境中使用require就需要引用Requi...
在uniapp使用vue3版本时, return require("@/static/images/ranking-1.png") 会报如下错误: Error: module “components/hot-ranking/@/static/images/ranking-1.png.js” is not defined 好像@没有被解析为根目录, 并且require的时候会自动在后面加上.js后缀名。请问该如何修改代码呢?