vue3vite中不支持require后的平替写法
发表于:2025-01-15 | 分类: 前端
字数统计: 156 | 阅读时长: 1分钟 | 阅读量:

当开发框架从 vue2 升级到 vue3 + vite 后 或者 项目要从 v2 升级到 v3 + vite,一些使用 require动态路径引入的资源会报错

这一般是因为 vue3 vite 不支持 commonjs 写法,可以安装一些插件来支持,但我个人更倾向于使用 v3 的解决方案:

  • 这是之前的写法

    1
    <img alt="" :src="require(`/path/${aPath}.png')`"/>
    1
    let aPath = 'imgName'
  • 处理成 v3 支持的写法 👇

    1
    <img alt="" :src="getImgUrl('imgName')"/>
    1
    2
    3
    const getImgUrl = (name) => {
    return new URL('/path/' + name + '.png', import.meta.url).href
    }
上一篇:
webgl页面里使用vue动态render组件
下一篇:
记录一下常用比较好用的css