404 在 nuxt 中找不到 svg

奧古斯丁G。

我想用這個插件顯示一些國旗(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"],
  ],
這是我的名字

如果您想查看實現,我創建了此 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 配置,因此不會在構建中導入文件......我會嘗試進一步調查!

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章