404 在 nuxt 中找不到 svg

Question

我想用这个插件显示一些国家的标志（ https://www.growthbunker.dev/vueflags/ ）

带有标志的文件夹位于：

.app/
  ../assets/flags <- HERE
  ../components
  ../layouts
  .. etc

插件设置

// plugins/vueflags.js

import Vue from "vue";
import VueFlags from "@growthbunker/vueflags";

Vue.use(VueFlags, {
    // Specify the path of the folder where the flags are stored.
    iconPath: 'assets/flags',
  });

最后我调用了组件（应该渲染法国国旗）

<gb-flag code="fr" size="small" />

但我得到这个错误

GET http://localhost:3000/assets/flags/fr.svg 404 (Not Found)

我尝试使用iconPath: '~/assets/flags' ，同样的错误：

GET http://localhost:3000/~/assets/flags/fr.svg 404 (Not Found)

在 nuxt.config.js 中：

buildModules: [
    [
      "@nuxtjs/vuetify",
      {
        /* module options */
      },
    ],
    ["@nuxtjs/svg"],
  ],

Answer 1

如果您想查看实现，我创建了此存储库： https://github.com/r9mp/stackoverflow-vueflags

要在简短版本中执行此操作：将您的 flags/*.svg 放在 static 目录中。

我试图让它与 assets/ 目录一起工作，但它似乎有点棘手（我认为）这个原因：小于 1kb 的文件在 base64 中转换，因此您的标志不会复制到 /_nuxt/flags/*.svg . From the documentation: "Which means that every file below 1 kB will be inlined as base64 data URL. Otherwise, the image/font will be copied in its corresponding folder (inside the.nuxt directory) with a name containing a version hash for better缓存。” （ https://nuxtjs.org/docs/directory-structure/assets#webpack-assets ）

或者，也许 wepback 只是不了解 vueflags 配置，因此没有在构建中导入文件......我会尝试进一步调查！