最新版uniapp使用vue3通过require引入图片报错

Question

在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后缀名。

请问该如何修改代码呢？

并且如果运行在h5端时，会报如下错误：
Uncaught (in promise)ReferenceError: require is not defined

h5端不存在require，请问又该如何修改代码进行适配呢？

Answer 1

Sunday 2022-03-16 14:56:54

你好

uniapp 的 vue 3版本将不再支持 commonJS 语法，所以不能使用 require() ，而需要转化为 ESM 语法（import ... from ./..）

H5 端的报错也是一样的。

• 提问者 慕粉1910546119 #1

  那么请问在vue3里如何像require那样动态引入呢？
  比如像这一小节里，引入的图片名根据变量会改变的，在vue3里该如何做到呢

• Sunday 回复 提问者 慕粉1910546119 #2

  这个依然可以通过 ESM 导入的，比如  import ranking1 from  "@/static/images/ranking-1.png"

• 提问者 慕粉1910546119 回复 Sunday #3

  那么用import 如何做到 类似 require(`@/static/images/ranking-${ranking}.png`) 这种动态文件名引入的效果呢？

点开查看后面8条评论