我想用這個插件顯示一些國旗(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] 删除。
我来说两句