Nuxt/vite 中的动态资产

Question

我可以简单地使用如下方法从 Nuxt（+ webpack）中的文件夹动态加载图像：

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

我搬到了Vite，require这里没有定义（使用rollup）。我怎样才能用 nuxt / vite 解决这个问题？有什么想法吗？

Answer 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

Nuxt/vite 中的动态资产

Dynamic assets in Nuxt / vite

javascript

nuxt.js

require

vite