404 在 nuxt 中找不到 svg答案

【问题标题】：404 not found svg in nuxt404 在 nuxt 中找不到 svg
【发布时间】：2022-01-09 23:10:23
【问题描述】：

我想用这个插件显示一些国家的标志 (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"],
  ],

【问题讨论】：

标签： vue.js svg nuxt.js

【解决方案1】：

如果您想查看实现，我创建了这个 repo：https://github.com/r9mp/stackoverflow-vueflags

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

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

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

【讨论】：