[{"data":1,"prerenderedAt":1000},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-directory-structure":352,"-nuxt-directory-structure-surround":995},[4,54,83,116,125,161,179,200],{"title":5,"path":6,"stem":7,"children":8},"Ai","/ai","ai",[9,12,42,46,50],{"title":10,"path":6,"stem":11},"AI 技術探索","ai/index",{"title":13,"path":14,"stem":15,"children":16,"page":41},"Rag","/ai/rag","ai/RAG",[17,21,25,29,33,37],{"title":18,"path":19,"stem":20},"BM25 演算法深入解析：從 TF-IDF 到現代搜尋引擎的核心技術","/ai/rag/bm25-deep-dive-from-tf-idf-to-rag","ai/RAG/bm25-deep-dive-from-tf-idf-to-rag",{"title":22,"path":23,"stem":24},"Dense Retrieval（向量檢索）深入解析","/ai/rag/dense-retrieval-deep-dive","ai/RAG/dense-retrieval-deep-dive",{"title":26,"path":27,"stem":28},"RAG（Retrieval-Augmented Generation）原理與實作入門","/ai/rag/rag-intro-principles-and-implementation","ai/RAG/rag-intro-principles-and-implementation",{"title":30,"path":31,"stem":32},"RAG Retrieval Strategy 深入解析","/ai/rag/rag-retrieval-strategy-deep-dive","ai/RAG/rag-retrieval-strategy-deep-dive",{"title":34,"path":35,"stem":36},"Reciprocal Rank Fusion（RRF）教學：打造更穩定的檢索融合策略","/ai/rag/rrf-reciprocal-rank-fusion-guide","ai/RAG/rrf-reciprocal-rank-fusion-guide",{"title":38,"path":39,"stem":40},"TF-IDF（Term Frequency–Inverse Document Frequency）深入解析","/ai/rag/tf-idf-deep-dive","ai/RAG/tf-idf-deep-dive",false,{"title":43,"path":44,"stem":45},"Docus AI 功能完整實作指南","/ai/docus-ai-implementation","ai/docus-ai-implementation",{"title":47,"path":48,"stem":49},"llms.txt 是什麼？在 Nuxt 中控制 AI 與搜尋引擎爬蟲的新方式","/ai/llms-txt","ai/llms-txt",{"title":51,"path":52,"stem":53},"MCP（Model Context Protocol）是什麼？用「AI 的 USB-C」理解模型如何安全連接工具與資料","/ai/mcp_concept","ai/mcp_concept",{"title":55,"path":56,"stem":57,"children":58,"page":41},"Data Analysis","/data-analysis","data-analysis",[59,63,67,71,75,79],{"title":60,"path":61,"stem":62},"Exploratory Data Analysis（EDA）資料探索分析入門","/data-analysis/exploratory-data-analysis-eda","data-analysis/exploratory-data-analysis-eda",{"title":64,"path":65,"stem":66},"PR-AUC 深入解析：不平衡分類問題的重要評估指標","/data-analysis/pr-auc-for-imbalanced-classification","data-analysis/pr-auc-for-imbalanced-classification",{"title":68,"path":69,"stem":70},"ROC-AUC 深入解析：理解分類模型的判斷能力","/data-analysis/roc-auc-complete-guide","data-analysis/roc-auc-complete-guide",{"title":72,"path":73,"stem":74},"SHAP（SHapley Additive exPlanations）模型解釋方法深入解析","/data-analysis/shap-model-interpretation-complete-guide","data-analysis/shap-model-interpretation-complete-guide",{"title":76,"path":77,"stem":78},"Social Network Analysis（SNA）深入解析","/data-analysis/social-network-analysis-sna","data-analysis/social-network-analysis-sna",{"title":80,"path":81,"stem":82},"Time-based Split：為什麼時間序列資料不能使用 Random Split？","/data-analysis/time-based-split-vs-random-split","data-analysis/time-based-split-vs-random-split",{"title":84,"path":85,"stem":86,"children":87,"page":41},"MachineLearning","/machine_learning","machine_learning",[88,92,96,100,104,108,112],{"title":89,"path":90,"stem":91},"Confusion Matrix（混淆矩陣）完整解析","/machine_learning/confusion-matrix","machine_learning/confusion-matrix",{"title":93,"path":94,"stem":95},"Decision Tree 模型完整教學：從原理到 Python 實作","/machine_learning/decision-tree-complete-guide","machine_learning/decision-tree-complete-guide",{"title":97,"path":98,"stem":99},"為什麼 Decision Tree 在 Tabular Data 上常常勝過 Deep Learning？","/machine_learning/decision-tree-vs-deep-learning-on-tabular-data","machine_learning/decision-tree-vs-deep-learning-on-tabular-data",{"title":101,"path":102,"stem":103},"LightGBM 模型入門：理解高效能的 Gradient Boosting 演算法","/machine_learning/lightgbm-intro-for-tabular-data","machine_learning/lightgbm-intro-for-tabular-data",{"title":105,"path":106,"stem":107},"Logistic Regression（Logit 回歸）完整教學","/machine_learning/logistic-regression-complete-guide","machine_learning/logistic-regression-complete-guide",{"title":109,"path":110,"stem":111},"為什麼模型訓練需要 Train / Validation / Test Dataset？","/machine_learning/train-validation-test-dataset","machine_learning/train-validation-test-dataset",{"title":113,"path":114,"stem":115},"XGBoost 原理與實務教學","/machine_learning/xgboost-complete-guide","machine_learning/xgboost-complete-guide",{"title":117,"path":118,"stem":119,"children":120,"page":41},"Network","/network","network",[121],{"title":122,"path":123,"stem":124},"DNS 設定入門：CNAME vs A Record 完整解析","/network/dns-cname-vs-a-record-guide","network/dns-cname-vs-a-record-guide",{"title":126,"path":127,"stem":128,"children":129},"Nuxt","/nuxt","nuxt",[130,133,137,141,145,149,153,157],{"title":131,"path":127,"stem":132},"Nuxt 實戰指南","nuxt/index",{"title":134,"path":135,"stem":136},"Abstraction Layer 與 Adapter 的差別，一次搞懂設計角色","/nuxt/adapter_abstraction_layer","nuxt/adapter_abstraction_layer",{"title":138,"path":139,"stem":140},"Nuxt 4 全面理解 — 專案檔案結構解析","/nuxt/directory_structure","nuxt/directory_structure",{"title":142,"path":143,"stem":144},"Nuxt 前端 build 流程完整解析","/nuxt/frontend_build","nuxt/frontend_build",{"title":146,"path":147,"stem":148},"Nitro 是什麼？從 Nuxt 專案到 Server 與 Edge 的關鍵引擎","/nuxt/nitro","nuxt/nitro",{"title":150,"path":151,"stem":152},"深入理解 Nuxt 的 .nuxt 與 .output：為什麼部署時一定要分清楚？","/nuxt/nuxt_and_output","nuxt/nuxt_and_output",{"title":154,"path":155,"stem":156},"Nuxt 中 dev、build、preview 的差異一次搞懂","/nuxt/nuxt_dev_build_preview","nuxt/nuxt_dev_build_preview",{"title":158,"path":159,"stem":160},"Nuxt Image vs \u003Cimg>：為什麼 Nuxt 3 專案幾乎都該用 \u003CNuxtImg>？","/nuxt/nuxt_image","nuxt/nuxt_image",{"title":162,"path":163,"stem":164,"children":165},"Python 程式開發","/python","python/index",[166,167,171,175],{"title":162,"path":163,"stem":164},{"title":168,"path":169,"stem":170},"如何在 FastAPI 中調用記憶體 Buffer 回傳圖片 (附實例)","/python/memory_buffer","python/memory_buffer",{"title":172,"path":173,"stem":174},"Python 單元測試教學：如何為你的程式撰寫 Test","/python/python-unit-testing-unittest-pytest","python/python-unit-testing-unittest-pytest",{"title":176,"path":177,"stem":178},"如何使用 uv 取代 pip：改善 Python 專案的開發流程","/python/uv","python/uv",{"title":180,"path":181,"stem":182,"children":183,"page":41},"Statistic","/statistic","statistic",[184,188,192,196],{"title":185,"path":186,"stem":187},"卡方檢定（Chi-Square Test）入門教學","/statistic/chi-square-test-intro","statistic/chi-square-test-intro",{"title":189,"path":190,"stem":191},"常見抽樣方法（Sampling Methods）教學：Stratified、Quota、Convenience、Systematic、Simple Random","/statistic/common-sampling-methods-guide","statistic/common-sampling-methods-guide",{"title":193,"path":194,"stem":195},"Cramér’s V 指標介紹：如何衡量兩個類別變數之間的關聯","/statistic/cramers-v-for-categorical-association","statistic/cramers-v-for-categorical-association",{"title":197,"path":198,"stem":199},"Mann–Whitney U 與 Kolmogorov–Smirnov（KS）檢定：非參數統計檢定的入門指南","/statistic/mann-whitney-u-and-ks-test-intro","statistic/mann-whitney-u-and-ks-test-intro",{"title":201,"path":202,"stem":203,"children":204},"WebDev","/web_dev","web_dev",[205,208,234,248,282,312,334],{"title":206,"path":202,"stem":207},"Web 前端開發","web_dev/index",{"title":209,"path":210,"stem":211,"children":212},"瀏覽器與渲染","/web_dev/browser","web_dev/browser/index",[213,214,218,222,226,230],{"title":209,"path":210,"stem":211},{"title":215,"path":216,"stem":217},"瀏覽器儲存空間完整解析：Cookie、localStorage、IndexedDB 到 Cache Storage","/web_dev/browser/browser-storage-comprehensive-guide","web_dev/browser/browser-storage-comprehensive-guide",{"title":219,"path":220,"stem":221},"DOM (Document Object Model) 深入解析","/web_dev/browser/dom","web_dev/browser/dom",{"title":223,"path":224,"stem":225},"Service Worker Request Flow 深入解析","/web_dev/browser/service-worker-request-flow","web_dev/browser/service-worker-request-flow",{"title":227,"path":228,"stem":229},"CSR、SSR 與 SSG 是什麼？前端渲染策略完整比較","/web_dev/browser/ssr_csr_ssg","web_dev/browser/ssr_csr_ssg",{"title":231,"path":232,"stem":233},"Virtual DOM 深入解析：為什麼它能優化前端效能？","/web_dev/browser/virtual_dom","web_dev/browser/virtual_dom",{"title":235,"path":236,"stem":237,"children":238},"圖形技術","/web_dev/graphics","web_dev/graphics/index",[239,240,244],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"為什麼 Three.js 專案幾乎都選擇 CSR？從 SSR 問題談起","/web_dev/graphics/threejs_csr","web_dev/graphics/threejs_csr",{"title":245,"path":246,"stem":247},"WebGL 是什麼？為什麼前端 3D 幾乎都靠它？","/web_dev/graphics/webgl","web_dev/graphics/webGL",{"title":249,"path":250,"stem":251,"children":252},"架構與配置","/web_dev/infrastructure","web_dev/infrastructure/index",[253,254,258,262,266,270,274,278],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257},"Zeabur + K3s + Nuxt 部署架構完整解析","/web_dev/infrastructure/k3s-zeabur","web_dev/infrastructure/K3s-zeabur",{"title":259,"path":260,"stem":261},"ECS vs Docker vs Kubernetes：從部署堆疊理解三層架構","/web_dev/infrastructure/ecs-docker-kubernetes-stack","web_dev/infrastructure/ecs-docker-kubernetes-stack",{"title":263,"path":264,"stem":265},"ECS vs VPS 是什麼？從部署網站的角度一次搞懂差別","/web_dev/infrastructure/ecs-vs-vps","web_dev/infrastructure/ecs-vs-vps",{"title":267,"path":268,"stem":269},"Zeabur 內網服務連線完整入門指南","/web_dev/infrastructure/k3s-internal-networking","web_dev/infrastructure/k3s-internal-networking",{"title":271,"path":272,"stem":273},"使用 Microservices 架構設計系統的優勢解析","/web_dev/infrastructure/microservices-architecture-advantages","web_dev/infrastructure/microservices-architecture-advantages",{"title":275,"path":276,"stem":277},"Nginx 入門教學：從反向代理到與 Kubernetes 的架構比較","/web_dev/infrastructure/nginx-intro","web_dev/infrastructure/nginx-intro",{"title":279,"path":280,"stem":281},"YAML 配置是什麼？為什麼現代開發都在用它","/web_dev/infrastructure/yaml-configuration","web_dev/infrastructure/yaml-configuration",{"title":283,"path":284,"stem":285,"children":286},"網絡與通訊","/web_dev/network","web_dev/network/index",[287,288,292,296,300,304,308],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"HTTP Request 結構完整解析：從 Request Line 到 Header 一次看懂","/web_dev/network/http-request-structure","web_dev/network/http-request-structure",{"title":293,"path":294,"stem":295},"OSI 模型（Open Systems Interconnection Model）完整解析","/web_dev/network/osi-model","web_dev/network/osi-model",{"title":297,"path":298,"stem":299},"RESTful API 設計原則與實務解析","/web_dev/network/restful-api","web_dev/network/restful-api",{"title":301,"path":302,"stem":303},"RESTful API 五大設計原則深入解析","/web_dev/network/restful-api-principles","web_dev/network/restful-api-principles",{"title":305,"path":306,"stem":307},"Server-Sent Events (SSE) 深入解析與實作教學","/web_dev/network/sse-introduction","web_dev/network/sse-introduction",{"title":309,"path":310,"stem":311},"WebSocket 入門教學：從概念到 Node.js 實作","/web_dev/network/websocket-introduction","web_dev/network/websocket-introduction",{"title":313,"path":314,"stem":315,"children":316},"認證與安全","/web_dev/security","web_dev/security/index",[317,318,322,326,330],{"title":313,"path":314,"stem":315},{"title":319,"path":320,"stem":321},"使用 Cookie 與 Session 建立使用者驗證（完整新手教學）","/web_dev/security/cookie-session-authentication","web_dev/security/cookie-session-authentication",{"title":323,"path":324,"stem":325},"JWT 驗證機制完整解析：從登入流程到實務應用","/web_dev/security/jwt-authentication","web_dev/security/jwt-authentication",{"title":327,"path":328,"stem":329},"Secret Key 簽名是什麼？從零理解資料簽名的本質","/web_dev/security/secret-key-signing","web_dev/security/secret-key-signing",{"title":331,"path":332,"stem":333},"SSH（Secure Shell）是什麼？從遠端登入到安全通道的核心概念","/web_dev/security/ssh","web_dev/security/ssh",{"title":335,"path":336,"stem":337,"children":338},"SEO 與規範","/web_dev/seo","web_dev/seo/index",[339,340,344,348],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Canonical URL 是什麼？用生活化方式搞懂前端 SEO 的基本保命符","/web_dev/seo/canonical_link","web_dev/seo/canonical_link",{"title":345,"path":346,"stem":347},"robots.txt 是什麼？SEO 的第一道守門員","/web_dev/seo/robot_txt","web_dev/seo/robot_txt",{"title":349,"path":350,"stem":351},"Nuxt SEO 中的 Meta 與 SEO 工具是如何運作的？","/web_dev/seo/seo","web_dev/seo/seo",{"id":353,"title":138,"body":354,"description":984,"extension":985,"links":986,"meta":987,"navigation":992,"path":139,"seo":993,"stem":140,"__hash__":994},"docs/nuxt/directory_structure.md",{"type":355,"value":356,"toc":966},"minimark",[357,361,366,384,391,394,398,401,449,456,458,462,469,472,543,548,551,555,566,569,577,588,590,594,604,610,613,615,619,628,630,719,726,728,732,735,737,741,748,750,754,770,773,775,779,786,848,851,853,857,878,881,883,886,889,903,905,908,915,918,920,923,962],[358,359,138],"h1",{"id":360},"nuxt-4-全面理解-專案檔案結構解析",[362,363,365],"h2",{"id":364},"nuxt-4-為什麼重視檔案結構","Nuxt 4 為什麼重視檔案結構",[367,368,369,370,379,380,383],"p",{},"Nuxt 是基於 Vue.js 的完整堆疊（full-stack）框架，目的在於提升開發體驗和網站效能，使你可以",[371,372,373,374,378],"strong",{},"從一開始就把精力放在寫 ",[375,376,377],"code",{},".vue"," 文件、設計頁面與功能上，而不是花很多時間管理路由、SSR 設定或檔案引用","。Nuxt 使用「",[371,381,382],{},"約定優於設定","（convention over configuration）」的設計理念，讓開發者只要依照預設結構建立檔案，Nuxt 就能自動處理路由、引用與編譯等工作。",[367,385,386,387,390],{},"這種方式的核心，在於",[371,388,389],{},"一致且直覺的檔案結構可以大幅減少專案複雜度","，提供更快的上手速度與更好的維護性。因此理解 Nuxt 的目錄規劃，是每一位 Nuxt 開發者必備的基礎功。以下我們從最重要的幾個目錄開始解析。",[392,393],"hr",{},[362,395,397],{"id":396},"專案根目錄root-directory","專案根目錄（Root Directory）",[367,399,400],{},"當你建立一個 Nuxt 4 專案後，資料夾的根目錄通常會包含如下檔案：",[402,403,408],"pre",{"className":404,"code":405,"language":406,"meta":407,"style":407},"language-bash shiki shiki-themes github-dark","nuxt.config.ts\npackage.json\ntsconfig.json\napp/\ncontent/\nserver/\n","bash","",[375,409,410,419,425,431,437,443],{"__ignoreMap":407},[411,412,415],"span",{"class":413,"line":414},"line",1,[411,416,418],{"class":417},"svObZ","nuxt.config.ts\n",[411,420,422],{"class":413,"line":421},2,[411,423,424],{"class":417},"package.json\n",[411,426,428],{"class":413,"line":427},3,[411,429,430],{"class":417},"tsconfig.json\n",[411,432,434],{"class":413,"line":433},4,[411,435,436],{"class":417},"app/\n",[411,438,440],{"class":413,"line":439},5,[411,441,442],{"class":417},"content/\n",[411,444,446],{"class":413,"line":445},6,[411,447,448],{"class":417},"server/\n",[367,450,451,452,455],{},"其中最核心的一個檔案就是 ",[375,453,454],{},"nuxt.config.ts","。這是 Nuxt 的全域設定中樞，你可以在這裡設定應用行為、註冊模組、調整 SSR/SPA 模式、加入第三方插件等。無論是預設值還是客製化設定，都可以透過這個檔案進行調整。",[392,457],{},[362,459,461],{"id":460},"app-目錄-應用主要區塊","app/ 目錄 — 應用主要區塊",[367,463,464,465,468],{},"Nuxt 4 的一個重要變化是：大多數前端相關的內容都放在 ",[375,466,467],{},"app/"," 這個目錄之下。這個設計讓前端和後端邏輯更清楚地分離。",[367,470,471],{},"典型的目錄結構如下：",[402,473,475],{"className":404,"code":474,"language":406,"meta":407,"style":407},"app/\n├─ assets/\n├─ components/\n├─ composables/\n├─ layouts/\n├─ middleware/\n├─ pages/\n├─ plugins/\n└─ utils/\n",[375,476,477,481,490,497,504,511,518,526,534],{"__ignoreMap":407},[411,478,479],{"class":413,"line":414},[411,480,436],{"class":417},[411,482,483,486],{"class":413,"line":421},[411,484,485],{"class":417},"├─",[411,487,489],{"class":488},"sU2Wk"," assets/\n",[411,491,492,494],{"class":413,"line":427},[411,493,485],{"class":417},[411,495,496],{"class":488}," components/\n",[411,498,499,501],{"class":413,"line":433},[411,500,485],{"class":417},[411,502,503],{"class":488}," composables/\n",[411,505,506,508],{"class":413,"line":439},[411,507,485],{"class":417},[411,509,510],{"class":488}," layouts/\n",[411,512,513,515],{"class":413,"line":445},[411,514,485],{"class":417},[411,516,517],{"class":488}," middleware/\n",[411,519,521,523],{"class":413,"line":520},7,[411,522,485],{"class":417},[411,524,525],{"class":488}," pages/\n",[411,527,529,531],{"class":413,"line":528},8,[411,530,485],{"class":417},[411,532,533],{"class":488}," plugins/\n",[411,535,537,540],{"class":413,"line":536},9,[411,538,539],{"class":417},"└─",[411,541,542],{"class":488}," utils/\n",[544,545,547],"h3",{"id":546},"assets-靜態資產","🧰 assets/ — 靜態資產",[367,549,550],{},"這個資料夾放置像是樣式檔（CSS/SCSS）、圖片、字體等資源。Nuxt 會讓構建工具（例如 Vite）處理這些素材，以便它們可以高效地加入到網站中。",[544,552,554],{"id":553},"components-vue-元件","📦 components/ — Vue 元件",[367,556,557,558,561,562,565],{},"所有可重複使用的 Vue 元件都放在 ",[375,559,560],{},"components/"," 下。Nuxt 支援自動匯入（auto-import），",[371,563,564],{},"你不需要手動 import 就能在頁面或其他組件中直接使用","。",[367,567,568],{},"例如：",[402,570,575],{"className":571,"code":573,"language":574,"meta":407},[572],"language-text","components/\n├─ BaseButton.vue\n├─ Card.vue\n└─ form/\n   └─ InputField.vue\n","text",[375,576,573],{"__ignoreMap":407},[367,578,579,580,583,584,587],{},"可以在任何頁面直接使用 ",[375,581,582],{},"\u003CBaseButton />","、",[375,585,586],{},"\u003CCard />","，元件命名會根據檔案夾層級自動生成。",[392,589],{},[544,591,593],{"id":592},"pages-基於檔案路由","📄 pages/ — 基於檔案路由",[367,595,596,597,600,601,603],{},"Nuxt 最有名的功能之一就是「檔案路由」：只要你在 ",[375,598,599],{},"pages/"," 下建立 ",[375,602,377],{}," 檔案，Nuxt 就會自動根據檔案結構生成對應的路由。例如：",[402,605,608],{"className":606,"code":607,"language":574,"meta":407},[572],"pages/\n├─ index.vue -> /\n├─ about.vue -> /about\n└─ blog/\n   └─ [id].vue -> /blog/:id\n",[375,609,607],{"__ignoreMap":407},[367,611,612],{},"這讓你不需要手動定義路由設定，大幅提升開發效率。",[392,614],{},[544,616,618],{"id":617},"layouts-佈局模板","🎨 layouts/ — 佈局模板",[367,620,621,624,625,565],{},[375,622,623],{},"layouts"," 目錄用來定義頁面佈局，像是網站的全域 header/footer 結構。若頁面沒有特別指定佈局，Nuxt 會使用預設的 ",[375,626,627],{},"default.vue",[367,629,568],{},[402,631,635],{"className":632,"code":633,"language":634,"meta":407,"style":407},"language-vue shiki shiki-themes github-dark","\u003C!-- layouts/default.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CHeader />\n    \u003CNuxtPage />\n    \u003CFooter />\n  \u003C/div>\n\u003C/template>\n","vue",[375,636,637,643,656,666,680,690,701,710],{"__ignoreMap":407},[411,638,639],{"class":413,"line":414},[411,640,642],{"class":641},"sAwPA","\u003C!-- layouts/default.vue -->\n",[411,644,645,649,653],{"class":413,"line":421},[411,646,648],{"class":647},"s95oV","\u003C",[411,650,652],{"class":651},"s4JwU","template",[411,654,655],{"class":647},">\n",[411,657,658,661,664],{"class":413,"line":427},[411,659,660],{"class":647},"  \u003C",[411,662,663],{"class":651},"div",[411,665,655],{"class":647},[411,667,668,671,674,678],{"class":413,"line":433},[411,669,670],{"class":647},"    \u003C",[411,672,673],{"class":651},"Header",[411,675,677],{"class":676},"s6RL2"," /",[411,679,655],{"class":647},[411,681,682,684,687],{"class":413,"line":439},[411,683,670],{"class":647},[411,685,686],{"class":651},"NuxtPage",[411,688,689],{"class":647}," />\n",[411,691,692,694,697,699],{"class":413,"line":445},[411,693,670],{"class":647},[411,695,696],{"class":651},"Footer",[411,698,677],{"class":676},[411,700,655],{"class":647},[411,702,703,706,708],{"class":413,"line":520},[411,704,705],{"class":647},"  \u003C/",[411,707,663],{"class":651},[411,709,655],{"class":647},[411,711,712,715,717],{"class":413,"line":528},[411,713,714],{"class":647},"\u003C/",[411,716,652],{"class":651},[411,718,655],{"class":647},[367,720,721,722,725],{},"在這裡，",[375,723,724],{},"\u003CNuxtPage />"," 是頁面內容的插槽，而 header/footer 則包覆應用所有頁面 UI 樣板。",[392,727],{},[544,729,731],{"id":730},"️-middleware-導航中介邏輯","⚙️ middleware/ — 導航中介邏輯",[367,733,734],{},"這裡可以放置在頁面導航之前執行的邏輯，例如權限判斷、頁面拦截等。Nuxt 會依照文件名稱自動把 middleware 掛載到對應頁面。這種設計讓跨頁邏輯的管理變得更簡潔。",[392,736],{},[544,738,740],{"id":739},"plugins-第三方插件與擴充","🔌 plugins/ — 第三方插件與擴充",[367,742,743,744,747],{},"當你需要在 Vue 或 Nuxt 初始化階段注入插件時，例如全域元件或外部庫，這些設定就放在 ",[375,745,746],{},"plugins/"," 目錄下。Nuxt 會自動偵測並在建構時註冊。",[392,749],{},[544,751,753],{"id":752},"composables-utils-共享函式","🧠 composables/ & utils/ — 共享函式",[755,756,757,764],"ul",{},[758,759,760,763],"li",{},[371,761,762],{},"composables/","：放置可重用的 Vue composition 函式。",[758,765,766,769],{},[371,767,768],{},"utils/","：放置一般的工具函式，像是 helper、純邏輯函式等。",[367,771,772],{},"這兩類目錄通常自動被 Nuxt 註冊，所以你可以直接在頁面或組件用而不需手動匯入。",[392,774],{},[362,776,778],{"id":777},"server-目錄-伺服器端-api-與處理","server/ 目錄 — 伺服器端 API 與處理",[367,780,781,782,785],{},"除了前端資源外，Nuxt 也支援後端 API 直接在專案內撰寫。",[375,783,784],{},"server/"," 目錄用來存放後端路由與伺服器處理程式：",[402,787,789],{"className":404,"code":788,"language":406,"meta":407,"style":407},"server/\n├─ api/\n│  └─ hello.ts -> 對應 /api/hello\n├─ middleware/\n│  └─ auth.ts\n└─ routes/\n",[375,790,791,795,802,826,832,841],{"__ignoreMap":407},[411,792,793],{"class":413,"line":414},[411,794,448],{"class":417},[411,796,797,799],{"class":413,"line":421},[411,798,485],{"class":417},[411,800,801],{"class":488}," api/\n",[411,803,804,807,810,813,816,820,823],{"class":413,"line":427},[411,805,806],{"class":417},"│",[411,808,809],{"class":488},"  └─",[411,811,812],{"class":488}," hello.ts",[411,814,815],{"class":647}," -",[411,817,819],{"class":818},"snl16",">",[411,821,822],{"class":488}," 對應",[411,824,825],{"class":488}," /api/hello\n",[411,827,828,830],{"class":413,"line":433},[411,829,485],{"class":417},[411,831,517],{"class":488},[411,833,834,836,838],{"class":413,"line":439},[411,835,806],{"class":417},[411,837,809],{"class":488},[411,839,840],{"class":488}," auth.ts\n",[411,842,843,845],{"class":413,"line":445},[411,844,539],{"class":417},[411,846,847],{"class":488}," routes/\n",[367,849,850],{},"在這裡建立的 API 檔案會被 Nuxt 自動識別並註冊為伺服器端路由，使你可以在前端透過 fetch 或 useFetch 輕鬆呼叫。",[392,852],{},[362,854,856],{"id":855},"content-目錄-內容管理系統","content/ 目錄 — 內容管理系統",[367,858,859,860,863,864,583,867,583,870,873,874,877],{},"如果你安裝了 Nuxt Content 模組，",[375,861,862],{},"content/"," 目錄會被 Nuxt 用來讀取 ",[375,865,866],{},".md",[375,868,869],{},".yml",[375,871,872],{},".json"," 等檔案，讓你可以",[371,875,876],{},"建立一個基於檔案的 CMS（內容管理系統）","。例如撰寫文章、API 文檔等內容。",[367,879,880],{},"你可以透過內建元件將 Markdown 文件渲染在頁面中，並進行查詢和導航。",[392,882],{},[362,884,885],{"id":885},"其他重要目錄",[367,887,888],{},"Nuxt 還會在開發過程中產生一些「自動生成的位置」：",[755,890,891,897],{},[758,892,893,896],{},[371,894,895],{},".nuxt/","：在開發模式下生成的中間構建目錄，不需加入版本控制。",[758,898,899,902],{},[371,900,901],{},".output/","：在編譯為生產環境後生成的最終輸出結果，可以部署到伺服器或靜態主機環境。",[392,904],{},[362,906,907],{"id":907},"結語",[367,909,910,911,914],{},"Nuxt 4 架構強調「",[371,912,913],{},"由檔案而生的路由與設定","」，只要依照官方建議架構書寫資料夾與檔案，就能讓開發過程更直覺、更具維護性。理解各個目錄的用途，將使你能夠更有效地規劃專案、快速開發並提高可讀性。",[367,916,917],{},"隨著 Nuxt 的自動匯入、自動路由、自動 SSR 等特性，你可以把開發重心放在功能與效能上，而不是繁瑣的配置細節。希望這篇整理能讓你建立一個清晰的 Nuxt 4 專案架構觀念。",[392,919],{},[362,921,922],{"id":922},"參考資料",[755,924,925,934,941,948,955],{},[758,926,927],{},[928,929,933],"a",{"href":930,"rel":931},"https://nuxt.com/docs/4.x/getting-started/introduction",[932],"nofollow","Nuxt 官方 — Introduction（Nuxt v4）",[758,935,936],{},[928,937,940],{"href":938,"rel":939},"https://nuxt.com/docs/4.x/directory-structure",[932],"Nuxt 官方 — Directory Structure（Nuxt v4）",[758,942,943],{},[928,944,947],{"href":945,"rel":946},"https://nuxt.com/docs/4.x/directory-structure/app/components",[932],"Nuxt 官方 — Components 目錄說明",[758,949,950],{},[928,951,954],{"href":952,"rel":953},"https://nuxt.com/docs/4.x/directory-structure/content",[932],"Nuxt 官方 — Content 模組與 content/ 目錄",[758,956,957],{},[928,958,961],{"href":959,"rel":960},"https://nuxt.com/docs/4.x/directory-structure/nuxt",[932],"Nuxt 官方 — .nuxt 生成目錄說明",[963,964,965],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}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 pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":407,"searchDepth":421,"depth":421,"links":967},[968,969,970,979,980,981,982,983],{"id":364,"depth":421,"text":365},{"id":396,"depth":421,"text":397},{"id":460,"depth":421,"text":461,"children":971},[972,973,974,975,976,977,978],{"id":546,"depth":427,"text":547},{"id":553,"depth":427,"text":554},{"id":592,"depth":427,"text":593},{"id":617,"depth":427,"text":618},{"id":730,"depth":427,"text":731},{"id":739,"depth":427,"text":740},{"id":752,"depth":427,"text":753},{"id":777,"depth":421,"text":778},{"id":855,"depth":421,"text":856},{"id":885,"depth":421,"text":885},{"id":907,"depth":421,"text":907},{"id":922,"depth":421,"text":922},"了解 Nuxt 4 框架的核心目錄與檔案規劃，掌握專案結構的設計理念，提升開發效率與架構清晰度。","md",null,{"tags":988,"category":128,"date":991},[126,989,990,203],"Vue","frontend","2026-02-10",true,{"title":138,"description":984},"LPw5dKQYARgXvMMMW_6N1a1DvEuXftVnIwwkNruj3PQ",[996,998],{"title":134,"path":135,"stem":136,"description":997,"children":-1},"Abstraction layer 與 Adapter 常一起出現卻容易混淆，本文從系統架構與設計模式角度，搭配 Nuxt / Nitro 實例，帶你理解兩者真正的角色分工。",{"title":142,"path":143,"stem":144,"description":999,"children":-1},"深入理解 Nuxt 在 build 階段如何將 Vue 與 TypeScript 程式碼轉換為瀏覽器可執行的前端資源，從掃描、編譯、打包到最佳化一次搞懂。",1776690842699]