vue3 vite中使用require引入静态资源文件提示require无定义

构建的vue3项目，无法使用require导入图片，需要处理。2.导入到当前页或注册为全局方法使用。1、定义一个require方法。

在Vue3中，使用require引入本地图片会报错，因为require是Webpack特有的方法，而Vite不支持。若项目基于Vite构建，应改用new URL结合import.meta.url动态获取图片路径。

【代码】在vue3+vite中 使用require。

问题：在 Vue3 项目中，使用 require 引入图片，报错 require is not defined。原因： Vue3 使用的是 vite，而 require 是 Webpack 的方法。

vue3+vite+ts中不能使用require <img :src="getAssetsImages(children.icon.type)" alt="" style="width: 35px;height: 35px;"> 1、vue2中可以给图动态设置src属性 const getAssetsImages = (name) => { return require(/src/common/images/menu/${name}.png) } 2、vue3+vite+ts使用requ

vue3，vite，vite-plugin-require-transform，打包报错，运行报错，npmrunbuild出现一堆报错，执行打包命令后出现报错怎么办，vue3+vite使用vite-plugin-require-transform插件build打包时报错如何解决，vue3项目中运行打包出现了很多警告提示报错，vue3使用阿里云ali-oss插件sdk导致打包报错解决方法，vue引入ali-oss阿里云oss的sdk运行build打包时报错，vite打包失败，import*as_vi

ES6标准发布后，module成为标准，标准使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们依然采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。在es6之前js一直没有自己的模块语法，为了解决这种尴尬就有了require.js的出现。接下来创建一个AboutRequire.vue文件，内容如下。来访问about页面，控制台打印结果如下。运行vue项目，在浏览器输入网站。运行项目，在浏览器输入。

（欢迎一起学习交流~~~）因为在自己搭建的小项目中准备用require动态引入一下图片、文件等资源，但是结果却是报以下的错（require未被定义）。接下来你就可以在自己的.vue,.js文件中使用require进行引入了。于是就找了一些解决方案，以下的方案感觉用着简便明了。

Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题

前端有很多的工具包是commonjs的写法，只能用require引入，而vite+vue3构建的项目不能使用require，只能用import，为了能够方便地引入commonjs工具包，我们需要把这些工具包转为es module。使用 @rollup/plugin-commonjs 插件，用于将CommonJS模块转换为ES6模块的Rollup插件.2、在vite.config.ts配置中添加该插件，注意 commonjs0必须在vue()上面，否则不生效。3、随意导入commonjs工具包。

与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。否则代码将被原样保留，因而在 build.target 不支持 import.meta.url 时会导致运行时错误。在生产构建时，Vite 才会进行必要的转换（保证 URL 在打包和资源哈希后仍指向正确的地址）vite官网静态资源处理 new URL(url, import.meta.url)import.meta.url ： ESM 的原生功能，会暴露当前模块的 URL。

因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。

vue3引入图片 无法使用require， vue3+vite构建项目使用require引入包出现问题需要用newURL来动态引入图片等静态资源

Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源