vite项目中动态引入src失败的问题解决:require is not defined

问题复现

静态引入路径(无问题)

html 复制代码
    <el-menu-item v-for="(item,index) in menuList" :index="item.name" :key="index">
      <img  class="menuItemImg" src="../svg/router/homePage.svg" alt="">
      {{ item.meta.cname }}
    </el-menu-item>

这里没啥问题。

但是,如果使用动态的路径引入,就会出问题

动态引入(图片不展示)

html 复制代码
    <el-menu-item v-for="(item,index) in menuList" :index="item.name" :key="index">
      <img  class="menuItemImg" :src="`../svg/router/homePage.svg`" alt="">
      {{ item.meta.cname }}
    </el-menu-item>

在vue中,:src需要使用require(路径)的值,而并非原始的路径值

src="静态路径"

:src="require(动态路径)"

不过这里引用之后依然有问题

require出问题(报错)

html 复制代码
    <el-menu-item v-for="(item,index) in menuList" :index="item.name" :key="index">
      <img  class="menuItemImg" :src="require(`../svg/router/homePage.svg`)" alt="">
      {{ item.meta.cname }}
    </el-menu-item>

问题分析

require在vite和webpack中,是不一样的。

在webpack环境中,我们可以随时使用require,但是在vite中,require这种引入文件的方式是不存在的,所以会报这个错误

vite路径具体可以看vite官网关于静态资源处理的模块:静态资源处理 {#static-asset-handling} | Vite中文网

(动态引入图片路径,大多数的项目都会用到,但是如果这里你不知道问题原因,那真的让人挺痛苦的。)

问题解决

封装一个require方法

javascript 复制代码
const require = (imgPath: string) => {
    try {
      const handlePath = imgPath.replace('@', '..')
      return new URL(handlePath, import.meta.url).href
    } catch (error) {
      console.warn(error)
    }
  }
   

引用

javascript 复制代码
    <el-menu-item v-for="(item,index) in menuList" :index="item.name" :key="index">
      <img  class="menuItemImg" :src="require(`../svg/router/${item.name}.svg`)" alt="">
      {{ item.meta.cname }}
    </el-menu-item>

结果

相关推荐
excel17 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着17 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友19 小时前
什么是API签名?
前端·后端·安全
会豪21 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子21 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶21 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子21 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_21 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark21 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_233321 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts