vue3+vite项目用require引入静态图片资源失败，怎么办？

最新推荐文章于 2024-11-24 22:58:49 发布
最新推荐文章于 2024-11-24 22:58:49 发布
阅读量200 收藏
点赞数
分类专栏： vue3 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74417967/article/details/132904288
版权

vue3+vite引入图片资源跟vue2+webpack项目是不一样的，具体用法我用一个项目实例来举例：

1采用v-for循环加载图片，首先要给静态图片资源编号名称后面加1-6号

2模板和方法里代码如下如下

3最后一步是在vite.config里配置，只有字es2020之后的语法才能用inpotr.meta方法

总结：具体详细的用法可以查看vite官网查看

Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）
王二红
12-16 2万+
vue3，vite，报错解决，vue3+vite报错requireisnotdefined，vue3vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“requireisnotdefined”问题，vite项目require语法兼容问题解决requireisnotdefine
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
王二红
09-08 1万+
vue3vite引入使用本地图片，vue3vite如何引入本地资源的图片图像，vite怎么把本地的图片赋值给src图片标签属性，vue3vite使用require引入本地图像报错，vue3vite组件库的组件怎么引入本地图片，vue3vite如何给组件库的图片属性链接本地资源的图像，elementplusantdesignvue组件怎么使用本地资源的静态图片，vue3vite版本引入本地静态图片的方式，vue3+vite引入本地图片，vue3如何加载本地图片等静态资源，引入
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
蓝胖子的博客
04-03 2356
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
vue 3.0 静态资源访问不到 解决办法
weixin_44647098的博客
04-18 2537
二话不说 直接上代码 module.exports = { // 基本路径 publicPath:"./", // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径 outputDir:“dist”, //打包时生成的生产环境构建文件的目录 assetsDir: ‘public’, // 放置生成的静态资源 (js、css、img、fonts) 的 (相...
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
Lea_HQ的博客
12-17 2251
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
vue3(vue-cli4.x)请求项目内静态文件问题
weixin_45517927的博客
04-10 726
引发 最近在学vue3，其中有一处想处理接口请求，故打算在本地创建json文件模拟接口请求。 实施 最开始创建的json文件没有考虑到位置问题，就随意放。但一请求就404，此时意识到了文件路径问题。尝试放在res的assets文件夹下与public文件夹下都没用，百度后也还是没整好。 解决 最后在自己的尝试下，在src/public文件下创建 js 文件夹，json文件放在里面，就可以正常请求到。 注意： 无论是在src还是public文件下，请求的路径都为 ./js/filename.json ...
vue项目静态资源404报错(vue3)
beiTiao_lys的博客
03-22 1959
vue中静态图片404
搭建vue3+vite+pinia项目步骤
小破孩的博客
07-04 1759
搭建 vue3+vite+pinia 项目超详细步骤
vue3+vite+js+elementPlus项目搭建
最新发布
weixin_74883980的博客
11-24 1221
3、在 src 目录下创建 router 文件夹，并创建 index.js 文件这里创建的是我们的路由配置文件，我们可以将路由全部写在里面，因为有些项目可能页面会很多，所以建议创建不同的文件夹来分块，在这个文件里面也可以进行路由守卫和拦截器的书写。2、在 src 目录下创建 views 文件夹，并创建 home.vue 文件，用来存放我们的vue页面,想写多少写多少。运行成功后即可看到访问地址为：http://localhost:3000 ，通过地址可以看到 Vue 项目页面。vite项目结构大致如下啊。
Vue3+vite+TypeScript+Vant项目搭建
VnOcean的博客
09-01 1110
本篇讲述基于NodeJs、Vite、Vue3、Typescript搭建前端项目的详细步骤，此外还包括配置pinia（store）、router、跨域代理以及引入vant库的主要步骤。
vue require引入静态文件报错
a983677218的博客
07-05 1000
如果是通过向后端发送请求，动态的获取对应的文件数据流很容易做到文件的显示和加载。通常情况下，vue项目的图片jpg，png等都可以直接在@/assets文件中直接使用require直接引入，通过el-images加载或者直接使用img通过路径加载。但是，一些媒体文件mp4或者pdf等二进制数据文件在vue项目中直接存在@/assets目录下是无法通过require引入的。前端会直接报错无法找到对应的文件。那么如果我们直接在项目的public目录下的static目录下存放这些文件，是不是能被检索到呢？
解决vite打包后，index页面空白，静态资源引入路径错误
like_a_diamond的博客
01-04 3131
使用vite打包时，静态资源加载败，本文为图片路径的写法，保证项目在生产环境及开发环境正常显示
在vue3+vite中 使用require
weixin_42348009的博客
11-21 4228
【代码】在vue3+vite中 使用require。
让 vite 支持 require 方法，只需要 50 行代码 （vite-plugin-require 插件）
weixin_44787578的博客
05-22 2078
可以看到一旦使用场景增加，再小的插件也会面临很多的问题需要考虑。仓库地址： https://github.com/wangzongming/vite-plugin-require开源与维护不易，记得给个start🌹。
解决vite+vue3项目的模板中不能使用require导入图片的问题
xuliqi666的博客
09-06 2263
在vue2中我们通常会在模板中通过三目运算符和require来实现动态图片，但是在vite+vue3项目中是没有require的，使用require会报错。
使用vue3+vite创建的项目，动态引入本地图片，不能直接使用require
bao_Heng的博客
11-27 1545
使用vue3+vite创建的项目，动态引入本地图片，不能直接使用require
vue2+vite+@vitejs/plugin-vue2可以使用require引用图片资源
个人博客
03-05 833
vitejs/plugin-vue则没有该功能，不能使用require，这应当出于vue2项目需要迁移vite的考虑，尤大才做了兼容处理，而vue3+vite一般是从新开发，不需要兼容require这种写法，更推荐import.meta.url这类新规范写法。很多文章都说vite不能用require，vue3+vite确实是这样的，但今天无意间发现vue2+vite中是可以使用require引用资源的。，对require语法做了处理，匹配到后进行语法替换。解析vue语法，而vue2使用的则是另一个插件。
Vue3+TypeScript+Vite 的项目中使用require动态引入图片报错
千里之行，始于足下！
12-15 1681
Vue3+TypeScript+Vite 的项目中使用require动态引入图片报错
如何在vue3+vite+ts中使用require
热门推荐
一个韩韩韩
04-13 1万+
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不能使用require引入包的问题
11-14
Vue3 和 Vite 是现代前端开发中的两个热门技术栈。Vite 是一个高性能的前端构建工具，它采用了更轻量级的预加载策略，而 Vue3 则是 Vue 框架的最新版本，强调了组件化和 TypeScript 的支持。 当你尝试使用 `require` 或者 `import * as` 来引入外部模块时，在 Vue3 + Vite 的组合下可能会遇到一些问题。这是因为 Vite 默认配置是基于 ES 模块（`.mjs` 文件），而不是 CommonJS（`.js` 文件）。CommonJS 的 `require` 功能在 Vite 中需要额外配置才能工作。 解决这个问题通常需要做以下几步： 1. **安装 vite-plugin-commonjs**：这是用于启用 CommonJS 支持的插件，可以使用 npm 或 yarn 安装： ```bash npm install --save-dev vite-plugin-commonjs ``` 2. **在 vite.config.js 中添加插件配置**： ```javascript import { defineConfig } from &#39;vite&#39;; import commonjs from &#39;vite-plugin-commonjs&#39;; export default defineConfig({ plugins: [ commonjs(), ], }); ``` 3. 使用 `import` 替换 `require`： 而不是 `require(&#39;package&#39;)`，你应该使用 `import package from &#39;./path/to/package&#39;`。 4. 如果是在.vue 文件中使用，可以在文件顶部使用 `import.meta.glob` 或者 `<script setup>` 特性来动态导入，因为 Vue 组件默认只支持 ES 模块。 注意，虽然上述步骤能解决大部分 `require` 的问题，但在某些大型项目中，完全迁移至 ES6 模块可能是更好的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值