Nuxt / vite 中的动态资产答案

【问题标题】：Dynamic assets in Nuxt / viteNuxt / vite 中的动态资产
【发布时间】：2021-12-18 14:05:57
【问题描述】：

我可以通过以下方法从 Nuxt (+ webpack) 中的文件夹动态加载图像：

getServiceIcon(iconName) {
  return require ('../../static/images/svg/services/' + iconName + '.svg');
}

我搬到了 Vite，这里没有定义 require（使用汇总）。我该如何解决这个问题，使用 nuxt / vite？有什么想法吗？

【问题讨论】：

您使用的是 Nuxt3？ github.com/nuxt/framework/discussions/868
不，2.15.8。 Ty，正在调查它。
然后，您可以在相关的 repo 中提出您的问题：github.com/nuxt/vite/issues?q=is%3Aissue+images+

标签： javascript nuxt.js require vite

【解决方案1】：

你可以像这样使用import()：

const getServiceIcon = async iconName => {
  const module = await import(/* @vite-ignore */ `../../static/images/svg/services/${iconName}.svg`)
  return module.default.replace(/^\/@fs/, '')
}

demo 1: Vue 3 Composition API

demo 2: Vue 3 Options API

demo 3: Vue 2 Composition API

demo 4: Vue 2 Options API

【讨论】：