我想用這個插件顯示一些國旗（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"],
],
uj5u.com熱心網友回復：
如果您想查看實作，我創建了此 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 配置，因此不會在構建中匯入檔案......我會嘗試進一步調查！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/372764.html
上一篇：Vue：將id移交給其他組件