在 nuxt 中找不到 404 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/Whosebug-vueflags

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

我试图让它与 assets/ 目录一起工作，但由于（我认为）这个原因似乎有点棘手：小于 1kb 的文件在 base64 中转换，因此你的标志不会复制到 /_nuxt/标志/*.svg。来自文档：“这意味着每个小于 1 kB 的文件都将被内联为 base64 数据 URL。否则，image/font 将被复制到其相应的文件夹（在 .nuxt 目录内）中，并带有名称包含用于更好缓存的版本散列。” (https://nuxtjs.org/docs/directory-structure/assets#webpack-assets)

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

在 nuxt 中找不到 404 svg

404 not found svg in nuxt

svg

vue.js

nuxt.js