vite，vue，nuxt。中new URL动态路径注意点

静态路径下别名（~，@）可能解析出来（nuxt3中测试过）。如解析不出来移除。已/开头

nuxt3中路径别名已~开头。以下代码根据使用环境可能有所差异。如vue3或者nuxt3中

vite中new URL文档。文档中最下面代码看着是支持下面不一定正确的代码。但是在nuxt3中使用未能正确读取。导致头大。记录下来

// ❌ 错误：~ 别名可能不被 Vite 识别
// const url = new URL(`~/assets/images/${id}.jpg`, import.meta.url).href

// ❌ 不一定正确，id模糊.使用相对路径
// 相对路径从当前组件文件位置出发，指向 assets
//const url = new URL(`../../assets/images/${id}.jpg`, import.meta.url).href

// ❌ 不一定正确: id模糊.用绝对路径（/ 表示项目根目录）
//const url = new URL(`/assets/images/${id}.jpg`, import.meta.url).href

// ❌ 不一定正确：虽然看起来是静态基础路径，但 id 可能是完全动态的（如用户输入）
// Vite 构建时无法预知所有可能的 id，导致路径解析失败
//const id = ref('123') // 假设 id 可能是任意值
//const url = new URL(`/assets/images/${id.value}.jpg`, import.meta.url).href

// ✅ 正确：确保 id 只能是有限的已知值（如 1-5）
// Vite 会预打包 assets/images/1.jpg 到 5.jpg
const id = ref(1)
if (id.value < 1 || id.value > 5) id.value = 1 // 限制范围
const url = new URL(`/assets/images/${id.value}.jpg`, import.meta.url).href

// ✅ 正确：确保 id  为数字同时文件名为a1-或*
// Vite 会预打包 assets/images/a1.jpg 或 a3.jpg
const id = ref(1)
const url = new URL(`/assets/images/a${id.value}.jpg`, import.meta.url).href

获取文件夹下所有文件

// 预加载 assets/images 下所有 jpg 文件
const images = import.meta.glob('/assets/images/*.jpg', { eager: true, as: 'url' })

// 预加载所有图片
const imageModules = import.meta.glob('/assets/images/*.jpg', { eager: true })

// 创建 ID 到 URL 的映射
const images = Object.fromEntries(
  Object.entries(imageModules).map(([path, module]) => {
    const id = path.split('/').pop().replace('.jpg', '')
    return [id, module.default]
  })
)