vue3+vite中使用new URL遇到的坑

背景：

框架版本：vue3+vite6.3.1

项目中需要动态引入assets文件夹中的图片资源，放到img标签中使用。这里需要开发环境以及生产环境的图片都能正常显示，img的src中带hash码。

问题：

1、测试环境可以显示，但是打包后无法显示。

答：new URL 第一个参数不能写变量，需要直接拼接的写字符串模版。静态资源处理 | Vite 官方中文文档

正确写法：

function getImageUrl(name) {
  return new URL(`./assets/images/label/${name}.png`, import.meta.url).href
}

错误写法：

// Vite 不会转换这个  imagePath不能是变量
const imagePath= `./assets/images/label/${name}.png`
function getImageUrl(name) {
  return new URL(imagePath, import.meta.url).href
}

2、我想把文件路径以及文件名称都传给getImageUrl，而不是只传文件名。但是无法解析，提示undefined

错误写法：

function getImageUrl(name) {
  return new URL(`./assets/images/${name}`, import.meta.url).href
}


// 调用
getImageUrl(`label/01.png`)
getImageUrl(`label/home/02.png`)

答案：如果是vite5的版本是可以这样写的，但是vite6不支持了！目前我用的是非常笨的方法——判断参数然后枚举。连循环拼接都不行。我总结的规律是：new URL第一个参数中需要包含所有的    / （斜杠） 。 /（斜杠） 不能从name中带过来。

正确写法：

function getImageUrl(...args) {
  // 如果只有一个参数，直接返回该路径
  if (args.length === 1) {
    return new URL(`../assets/images/${args[0]}`, import.meta.url).href
  }

  // 如果有两个参数，保持原有逻辑
  if (args.length === 2) {
    return new URL(`../assets/images/${args[0]}/${args[1]}`, import.meta.url)
      .href
  }
  // 如果有三个参数，保持原有逻辑
  if (args.length === 3) {
    return new URL(
      `../assets/images/${args[0]}/${args[1]}/${args[2]}`,
      import.meta.url
    ).href
  }

  // 如果有四个参数，保持原有逻辑
  if (args.length === 4) {
    return new URL(
      `../assets/images/${args[0]}/${args[1]}/${args[2]}/${args[3]}`,
      import.meta.url
    ).href
  }
  if (args.length === 5) {
    return new URL(
      `../assets/images/${args[0]}/${args[1]}/${args[2]}/${args[3]}/${args[4]}`,
      import.meta.url
    ).href
  }
  // 由于vite6问题，这里只能枚举，无法用变量拼接，/只能在url中，不能由参数传来
}

3、new URL不能以src开头`src/xx/xx/xx`，需要写assets的相对当前文件的相对路径`../assets/xx/xx`。