[{"data":1,"prerenderedAt":989},["ShallowReactive",2],{"blog:\u002Fblog\u002Fnuxt\u002Fnuxt-import-static-file":3},{"id":4,"title":5,"author":6,"body":7,"category":976,"date":977,"description":978,"draft":979,"extension":980,"image":981,"meta":982,"navigation":259,"path":983,"seo":984,"series":981,"seriesOrder":981,"seriesTitle":981,"stem":985,"tags":986,"updatedAt":981,"__hash__":988},"blog\u002Fblog\u002Fnuxt\u002Fnuxt-import-static-file.md","Nuxt 引入使用靜態資源的方式","charles",{"type":8,"value":9,"toc":959},"minimark",[10,23,28,34,56,70,73,77,83,102,106,116,120,141,154,340,345,445,449,464,467,472,481,485,491,501,504,510,514,532,537,632,637,755,759,766,872,879,925,927,930,955],[11,12,13,14,18,19,22],"p",{},"在純 SPA 的 Vue 專案中，我們常透過 ",[15,16,17],"code",{},"import data from '.\u002Fdata.json'"," 讀取 JSON。但在 Nuxt 中，因預設使用 Nitro，前後端環境分離，靜態資源分為「公開資源 (public assets)」與「伺服器資源 (server assets)」，因此無法直接 ",[15,20,21],{},"import","。本文將說明其原因，並示範如何正確讀取 JSON、圖片等靜態資源。",[24,25,27],"h2",{"id":26},"為什麼不能直接-import-靜態檔案","為什麼不能直接 import 靜態檔案？",[11,29,30,31,33],{},"在 Nuxt 專案中，",[15,32,21],{}," 靜態檔案會報錯的主要原因在於 Nuxt 採用了 SSR (伺服器端渲染) 與 Nitro 作為執行引擎，並且嚴格區分執行環境與靜態資源的型態。",[35,36,37,43,49],"ul",{},[38,39,40,42],"li",{},[15,41,21],{}," 是 ES Module 的靜態語法，會在建構 (build-time) 或 SSR 階段執行，僅適用於被當作模組處理的檔案。",[38,44,45,48],{},[15,46,47],{},"public\u002F"," 資料夾內的內容並非模組，而是部署後透過 URL 存取的公開靜態資源。",[38,50,51,52,55],{},"因此，若嘗試 ",[15,53,54],{},"import '~\u002Fpublic\u002Fdata.json'","，會在建構時找不到對應模組而出錯。",[11,57,58,59,62,63,66,67,69],{},"若你只用過 Vue 開發過純 SPA 專案，這樣的錯誤可能令人疑惑。其實，在純前端專案中，Vite 會將 ",[15,60,61],{},".json"," 視為模組處理。但在 Nuxt 中，這類靜態資源應透過 HTTP API 或 ",[15,64,65],{},"\u002Fpublic"," 的 URL 存取方式處理，而不是直接 ",[15,68,21],{},"。",[71,72],"hr",{},[24,74,76],{"id":75},"public-assets-公開靜態資源","Public assets (公開靜態資源)",[11,78,79,80,82],{},"在 Nuxt 中，",[15,81,47],{}," 資料夾用來存放靜態資源 (如圖片、影片、robots.txt 等)。這些檔案會自動對外公開，無需額外設定。",[35,84,85,91],{},[38,86,87,88,90],{},"放在 ",[15,89,47],{}," 的檔案，會自動對應到網站根目錄。",[38,92,93,94,97,98,101],{},"例如：",[15,95,96],{},"public\u002Fimage.png"," 可直接透過 ",[15,99,100],{},"localhost:3000\u002Fimage.png"," 存取。",[103,104,105],"h3",{"id":105},"目錄結構範例",[107,108,113],"pre",{"className":109,"code":111,"language":112},[110],"language-text","public\u002F\n├── image.png     \u003C-- localhost:3000\u002Fimage.png\n├── video.mp4     \u003C-- localhost:3000\u002Fvideo.mp4\n└── robots.txt    \u003C-- localhost:3000\u002Frobots.txt\n","text",[15,114,111],{"__ignoreMap":115},"",[103,117,119],{"id":118},"如何使用-public-assets","如何使用 public assets",[121,122,123,131,136],"ol",{},[38,124,125],{},[126,127,128,129],"strong",{},"將靜態檔案放入 ",[15,130,47],{},[38,132,133],{},[126,134,135],{},"重新啟動開發伺服器",[38,137,138],{},[126,139,140],{},"直接在瀏覽器或 vue 檔中透過 URL 路徑存取",[35,142,143],{},[38,144,145,146,149,150,153],{},"透過 ",[15,147,148],{},"useFetch"," 或 ",[15,151,152],{},"useAsyncData"," 讀取 JSON：",[107,155,159],{"className":156,"code":157,"language":158,"meta":115,"style":115},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cscript setup>\n\u002F\u002F 取得 public\u002F 目錄中的 JSON 數據\nconst { data: config } = await useFetch(\"\u002Fdata.json\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>設定資料\u003C\u002Fh1>\n    \u003Cpre>{{ config }}\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[15,160,161,181,188,244,254,261,271,282,303,321,331],{"__ignoreMap":115},[162,163,166,170,174,178],"span",{"class":164,"line":165},"line",1,[162,167,169],{"class":168},"sP7_E","\u003C",[162,171,173],{"class":172},"sQzsp","script",[162,175,177],{"class":176},"s9AJx"," setup",[162,179,180],{"class":168},">\n",[162,182,184],{"class":164,"line":183},2,[162,185,187],{"class":186},"sutJx","\u002F\u002F 取得 public\u002F 目錄中的 JSON 數據\n",[162,189,191,195,198,202,205,209,212,216,220,224,228,232,236,238,241],{"class":164,"line":190},3,[162,192,194],{"class":193},"sbsja","const",[162,196,197],{"class":168}," {",[162,199,201],{"class":200},"sucvu"," data",[162,203,204],{"class":168},":",[162,206,208],{"class":207},"s_hVV"," config",[162,210,211],{"class":168}," }",[162,213,215],{"class":214},"smGrS"," =",[162,217,219],{"class":218},"sVHd0"," await",[162,221,223],{"class":222},"sGLFI"," useFetch",[162,225,227],{"class":226},"su5hD","(",[162,229,231],{"class":230},"sjJ54","\"",[162,233,235],{"class":234},"s_sjI","\u002Fdata.json",[162,237,231],{"class":230},[162,239,240],{"class":226},")",[162,242,243],{"class":168},";\n",[162,245,247,250,252],{"class":164,"line":246},4,[162,248,249],{"class":168},"\u003C\u002F",[162,251,173],{"class":172},[162,253,180],{"class":168},[162,255,257],{"class":164,"line":256},5,[162,258,260],{"emptyLinePlaceholder":259},true,"\n",[162,262,264,266,269],{"class":164,"line":263},6,[162,265,169],{"class":168},[162,267,268],{"class":172},"template",[162,270,180],{"class":168},[162,272,274,277,280],{"class":164,"line":273},7,[162,275,276],{"class":168},"  \u003C",[162,278,279],{"class":172},"div",[162,281,180],{"class":168},[162,283,285,288,291,294,297,299,301],{"class":164,"line":284},8,[162,286,287],{"class":168},"    \u003C",[162,289,290],{"class":172},"h1",[162,292,293],{"class":168},">",[162,295,296],{"class":226},"設定資料",[162,298,249],{"class":168},[162,300,290],{"class":172},[162,302,180],{"class":168},[162,304,306,308,310,312,315,317,319],{"class":164,"line":305},9,[162,307,287],{"class":168},[162,309,107],{"class":172},[162,311,293],{"class":168},[162,313,314],{"class":226},"{{ config }}",[162,316,249],{"class":168},[162,318,107],{"class":172},[162,320,180],{"class":168},[162,322,324,327,329],{"class":164,"line":323},10,[162,325,326],{"class":168},"  \u003C\u002F",[162,328,279],{"class":172},[162,330,180],{"class":168},[162,332,334,336,338],{"class":164,"line":333},11,[162,335,249],{"class":168},[162,337,268],{"class":172},[162,339,180],{"class":168},[35,341,342],{},[38,343,344],{},"直接在模板中使用圖片或影片：",[107,346,348],{"className":156,"code":347,"language":158,"meta":115,"style":115},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cimg src=\"\u002Fimage.png\" alt=\"My Image\" \u002F>\n    \u003Cvideo src=\"\u002Fvideo.mp4\" controls>\u003C\u002Fvideo>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[15,349,350,358,366,401,429,437],{"__ignoreMap":115},[162,351,352,354,356],{"class":164,"line":165},[162,353,169],{"class":168},[162,355,268],{"class":172},[162,357,180],{"class":168},[162,359,360,362,364],{"class":164,"line":183},[162,361,276],{"class":168},[162,363,279],{"class":172},[162,365,180],{"class":168},[162,367,368,370,373,376,379,381,384,386,389,391,393,396,398],{"class":164,"line":190},[162,369,287],{"class":168},[162,371,372],{"class":172},"img",[162,374,375],{"class":176}," src",[162,377,378],{"class":168},"=",[162,380,231],{"class":230},[162,382,383],{"class":234},"\u002Fimage.png",[162,385,231],{"class":230},[162,387,388],{"class":176}," alt",[162,390,378],{"class":168},[162,392,231],{"class":230},[162,394,395],{"class":234},"My Image",[162,397,231],{"class":230},[162,399,400],{"class":168}," \u002F>\n",[162,402,403,405,408,410,412,414,417,419,422,425,427],{"class":164,"line":246},[162,404,287],{"class":168},[162,406,407],{"class":172},"video",[162,409,375],{"class":176},[162,411,378],{"class":168},[162,413,231],{"class":230},[162,415,416],{"class":234},"\u002Fvideo.mp4",[162,418,231],{"class":230},[162,420,421],{"class":176}," controls",[162,423,424],{"class":168},">\u003C\u002F",[162,426,407],{"class":172},[162,428,180],{"class":168},[162,430,431,433,435],{"class":164,"line":256},[162,432,326],{"class":168},[162,434,279],{"class":172},[162,436,180],{"class":168},[162,438,439,441,443],{"class":164,"line":263},[162,440,249],{"class":168},[162,442,268],{"class":172},[162,444,180],{"class":168},[446,447,448],"h4",{"id":448},"部署時的處理",[35,450,451,461],{},[38,452,453,454,456,457,460],{},"Nitro 會自動將 ",[15,455,47],{}," 內容複製到 ",[15,458,459],{},".output\u002Fpublic\u002F","，並建立資源清單，提升效能與快取。",[38,462,463],{},"不需手動搬移或設定，部署後即可直接存取。",[446,465,466],{"id":466},"常見問題",[11,468,469],{},[126,470,471],{},"Q：需要設定前綴路由或 middleware 嗎？",[473,474,475],"blockquote",{},[11,476,477,480],{},[126,478,479],{},"Ans","：不需要，Nitro 會自動處理。",[24,482,484],{"id":483},"server-assets-伺服器資源","Server assets (伺服器資源)",[11,486,487,490],{},[15,488,489],{},"server\u002Fassets\u002F"," 目錄用於存放僅供伺服器端存取的檔案 (如 json、機密檔案等)，這些資源不會直接公開給用戶端。",[35,492,493,498],{},[38,494,87,495,497],{},[15,496,489],{}," 的檔案會被打包進伺服器 bundle，可透過 Nitro 的 storage API 於 handler 內讀取。",[38,499,500],{},"適合存放 API 需要的資料",[103,502,105],{"id":503},"目錄結構範例-1",[107,505,508],{"className":506,"code":507,"language":112},[110],".\n├── server\u002F\n│   └── assets\u002F\n│       ├── data.json      \u002F\u002F 僅伺服器端可存取\n│   └── template\u002F\n│       └── success.html   \u002F\u002F 僅伺服器端可存取\n└── public\u002F\n  ├── image.png     \u003C-- localhost:3000\u002Fimage.png\n  ├── video.mp4     \u003C-- localhost:3000\u002Fvideo.mp4\n  └── robots.txt    \u003C-- localhost:3000\u002Frobots.txt\n",[15,509,507],{"__ignoreMap":115},[103,511,513],{"id":512},"如何使用-server-assets","如何使用 server assets",[121,515,516,523],{},[38,517,518],{},[126,519,520,521],{},"將檔案放入 ",[15,522,489],{},[38,524,525],{},[126,526,527,528,531],{},"在 API handler 內用 ",[15,529,530],{},"useStorage('assets:server')"," 讀取",[35,533,534],{},[38,535,536],{},"server\u002Fapi\u002Fdata.ts",[107,538,542],{"className":539,"code":540,"language":541,"meta":115,"style":115},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","export default defineEventHandler(async () => {\n  const data = await useStorage(\"assets:server\").getItem(\"data.json\");\n  return data;\n});\n","ts",[15,543,544,569,614,623],{"__ignoreMap":115},[162,545,546,549,552,555,557,560,563,566],{"class":164,"line":165},[162,547,548],{"class":218},"export",[162,550,551],{"class":218}," default",[162,553,554],{"class":222}," defineEventHandler",[162,556,227],{"class":226},[162,558,559],{"class":193},"async",[162,561,562],{"class":168}," ()",[162,564,565],{"class":193}," =>",[162,567,568],{"class":168}," {\n",[162,570,571,574,576,578,580,583,586,588,591,593,595,598,601,603,605,608,610,612],{"class":164,"line":183},[162,572,573],{"class":193},"  const",[162,575,201],{"class":207},[162,577,215],{"class":214},[162,579,219],{"class":218},[162,581,582],{"class":222}," useStorage",[162,584,227],{"class":585},"skxfh",[162,587,231],{"class":230},[162,589,590],{"class":234},"assets:server",[162,592,231],{"class":230},[162,594,240],{"class":585},[162,596,597],{"class":168},".",[162,599,600],{"class":222},"getItem",[162,602,227],{"class":585},[162,604,231],{"class":230},[162,606,607],{"class":234},"data.json",[162,609,231],{"class":230},[162,611,240],{"class":585},[162,613,243],{"class":168},[162,615,616,619,621],{"class":164,"line":190},[162,617,618],{"class":218},"  return",[162,620,201],{"class":226},[162,622,243],{"class":168},[162,624,625,628,630],{"class":164,"line":246},[162,626,627],{"class":168},"}",[162,629,240],{"class":226},[162,631,243],{"class":168},[35,633,634],{},[38,635,636],{},"pages\u002Findex.vue",[107,638,640],{"className":156,"code":639,"language":158,"meta":115,"style":115},"\u003Cscript setup>\nconst { data } = await useFetch(\"\u002Fapi\u002Fdata\");\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Server Data\u003C\u002Fh1>\n    \u003Cpre>{{ data }}\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[15,641,642,652,681,689,697,705,722,739,747],{"__ignoreMap":115},[162,643,644,646,648,650],{"class":164,"line":165},[162,645,169],{"class":168},[162,647,173],{"class":172},[162,649,177],{"class":176},[162,651,180],{"class":168},[162,653,654,656,658,660,662,664,666,668,670,672,675,677,679],{"class":164,"line":183},[162,655,194],{"class":193},[162,657,197],{"class":168},[162,659,201],{"class":207},[162,661,211],{"class":168},[162,663,215],{"class":214},[162,665,219],{"class":218},[162,667,223],{"class":222},[162,669,227],{"class":226},[162,671,231],{"class":230},[162,673,674],{"class":234},"\u002Fapi\u002Fdata",[162,676,231],{"class":230},[162,678,240],{"class":226},[162,680,243],{"class":168},[162,682,683,685,687],{"class":164,"line":190},[162,684,249],{"class":168},[162,686,173],{"class":172},[162,688,180],{"class":168},[162,690,691,693,695],{"class":164,"line":246},[162,692,169],{"class":168},[162,694,268],{"class":172},[162,696,180],{"class":168},[162,698,699,701,703],{"class":164,"line":256},[162,700,276],{"class":168},[162,702,279],{"class":172},[162,704,180],{"class":168},[162,706,707,709,711,713,716,718,720],{"class":164,"line":263},[162,708,287],{"class":168},[162,710,290],{"class":172},[162,712,293],{"class":168},[162,714,715],{"class":226},"Server Data",[162,717,249],{"class":168},[162,719,290],{"class":172},[162,721,180],{"class":168},[162,723,724,726,728,730,733,735,737],{"class":164,"line":273},[162,725,287],{"class":168},[162,727,107],{"class":172},[162,729,293],{"class":168},[162,731,732],{"class":226},"{{ data }}",[162,734,249],{"class":168},[162,736,107],{"class":172},[162,738,180],{"class":168},[162,740,741,743,745],{"class":164,"line":284},[162,742,326],{"class":168},[162,744,279],{"class":172},[162,746,180],{"class":168},[162,748,749,751,753],{"class":164,"line":305},[162,750,249],{"class":168},[162,752,268],{"class":172},[162,754,180],{"class":168},[446,756,758],{"id":757},"自訂-server-assets-目錄","自訂 server assets 目錄",[11,760,761,762,765],{},"可在 ",[15,763,764],{},"nuxt.config.ts"," 設定自訂目錄：",[107,767,769],{"className":539,"code":768,"language":541,"meta":115,"style":115},"export default defineNuxtConfig({\n  nitro: {\n    serverAssets: [\n      {\n        baseName: \"templates\",\n        dir: \".\u002Ftemplates\", \u002F\u002F 存放在 \u002Fserver\u002Ftemplates 中\n      },\n    ],\n  },\n});\n",[15,770,771,785,794,804,809,827,847,852,859,864],{"__ignoreMap":115},[162,772,773,775,777,780,782],{"class":164,"line":165},[162,774,548],{"class":218},[162,776,551],{"class":218},[162,778,779],{"class":222}," defineNuxtConfig",[162,781,227],{"class":226},[162,783,784],{"class":168},"{\n",[162,786,787,790,792],{"class":164,"line":183},[162,788,789],{"class":585},"  nitro",[162,791,204],{"class":168},[162,793,568],{"class":168},[162,795,796,799,801],{"class":164,"line":190},[162,797,798],{"class":585},"    serverAssets",[162,800,204],{"class":168},[162,802,803],{"class":226}," [\n",[162,805,806],{"class":164,"line":246},[162,807,808],{"class":168},"      {\n",[162,810,811,814,816,819,822,824],{"class":164,"line":256},[162,812,813],{"class":585},"        baseName",[162,815,204],{"class":168},[162,817,818],{"class":230}," \"",[162,820,821],{"class":234},"templates",[162,823,231],{"class":230},[162,825,826],{"class":168},",\n",[162,828,829,832,834,836,839,841,844],{"class":164,"line":263},[162,830,831],{"class":585},"        dir",[162,833,204],{"class":168},[162,835,818],{"class":230},[162,837,838],{"class":234},".\u002Ftemplates",[162,840,231],{"class":230},[162,842,843],{"class":168},",",[162,845,846],{"class":186}," \u002F\u002F 存放在 \u002Fserver\u002Ftemplates 中\n",[162,848,849],{"class":164,"line":273},[162,850,851],{"class":168},"      },\n",[162,853,854,857],{"class":164,"line":284},[162,855,856],{"class":226},"    ]",[162,858,826],{"class":168},[162,860,861],{"class":164,"line":305},[162,862,863],{"class":168},"  },\n",[162,865,866,868,870],{"class":164,"line":323},[162,867,627],{"class":168},[162,869,240],{"class":226},[162,871,243],{"class":168},[11,873,874,875,878],{},"然後在 handler 內用 ",[15,876,877],{},"useStorage('assets:templates')"," 讀取：",[107,880,882],{"className":539,"code":881,"language":541,"meta":115,"style":115},"const html = await useStorage(\"assets:templates\").getItem(\"success.html\");\n",[15,883,884],{"__ignoreMap":115},[162,885,886,888,891,893,895,897,899,901,904,906,908,910,912,914,916,919,921,923],{"class":164,"line":165},[162,887,194],{"class":193},[162,889,890],{"class":207}," html",[162,892,215],{"class":214},[162,894,219],{"class":218},[162,896,582],{"class":222},[162,898,227],{"class":226},[162,900,231],{"class":230},[162,902,903],{"class":234},"assets:templates",[162,905,231],{"class":230},[162,907,240],{"class":226},[162,909,597],{"class":168},[162,911,600],{"class":222},[162,913,227],{"class":226},[162,915,231],{"class":230},[162,917,918],{"class":234},"success.html",[162,920,231],{"class":230},[162,922,240],{"class":226},[162,924,243],{"class":168},[71,926],{},[24,928,929],{"id":929},"延伸閱讀",[35,931,932,941,948],{},[38,933,934],{},[935,936,940],"a",{"href":937,"rel":938},"https:\u002F\u002Fnitro.build\u002Fguide\u002Fassets",[939],"nofollow","Nitro 官方文件：Assets",[38,942,943],{},[935,944,947],{"href":945,"rel":946},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fassets",[939],"Nuxt 官方文件：Static Assets",[38,949,950],{},[935,951,954],{"href":952,"rel":953},"https:\u002F\u002Fvite.dev\u002Fguide\u002Ffeatures#json",[939],"Vite 功能：直接 Import JSON",[956,957,958],"style",{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sucvu, html code.shiki .sucvu{--shiki-light:#E53935;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":115,"searchDepth":190,"depth":190,"links":960},[961,962,969,975],{"id":26,"depth":183,"text":27},{"id":75,"depth":183,"text":76,"children":963},[964,965],{"id":105,"depth":190,"text":105},{"id":118,"depth":190,"text":119,"children":966},[967,968],{"id":448,"depth":246,"text":448},{"id":466,"depth":246,"text":466},{"id":483,"depth":183,"text":484,"children":970},[971,972],{"id":503,"depth":190,"text":105},{"id":512,"depth":190,"text":513,"children":973},[974],{"id":757,"depth":246,"text":758},{"id":929,"depth":183,"text":929},"Nuxt","2025-06-04","透過 Nitro 輕鬆將 json 檔、圖片、影片等靜態資源導入 Nuxt 專案，並了解 public assets 與 server assets 的差異與使用方式。",false,"md",null,{},"\u002Fblog\u002Fnuxt\u002Fnuxt-import-static-file",{"title":5,"description":978},"blog\u002Fnuxt\u002Fnuxt-import-static-file",[976,987],"Nitro","pxjd-3RFWLodNlnZBvKBKk1fdYLIWvoUhTXoLMy2Hd0",1780512500617]