[{"data":1,"prerenderedAt":1041},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-nuxt-and-output":352,"-nuxt-nuxt-and-output-surround":1036},[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":150,"body":354,"description":1024,"extension":1025,"links":1026,"meta":1027,"navigation":1033,"path":151,"seo":1034,"stem":152,"__hash__":1035},"docs/nuxt/nuxt_and_output.md",{"type":355,"value":356,"toc":996},"minimark",[357,371,380,390,393,412,415,418,421,424,430,433,435,441,450,453,473,480,482,488,494,500,503,523,525,531,537,543,546,552,558,560,566,571,580,590,596,602,610,612,617,622,628,631,643,645,651,657,663,666,668,675,680,685,688,702,705,707,714,722,725,731,734,747,750,752,755,845,847,851,854,860,863,869,871,874,877,883,885,889,892,903,906,912,917,919,922,925,943,945,948,960,963,965,968,978,981,989,992],[358,359,361,362,366,367,370],"h2",{"id":360},"為什麼-nuxt-與-output-是理解-nuxt-架構的關鍵","為什麼 ",[363,364,365],"code",{},".nuxt"," 與 ",[363,368,369],{},".output"," 是理解 Nuxt 架構的關鍵？",[372,373,374,375,379],"p",{},"在實務上，",[376,377,378],"strong",{},"很多 Nuxt 部署問題，其實都不是環境或指令錯誤","，而是對 Nuxt 產物的理解不夠清楚。\n最常見的狀況，就是搞混了下面這兩個資料夾：",[381,382,387],"pre",{"className":383,"code":385,"language":386},[384],"language-text",".nuxt\n.output\n","text",[363,388,385],{"__ignoreMap":389},"",[372,391,392],{},"如果你沒分清楚它們的用途，就很容易發生像是：",[394,395,396,400,406],"ul",{},[397,398,399],"li",{},"不知道該把哪個資料夾丟到伺服器",[397,401,402,403,405],{},"誤以為 ",[363,404,365],{}," 就是 build 結果",[397,407,408,409,411],{},"刪錯 ",[363,410,369],{},"，導致正式站無法啟動",[372,413,414],{},"這篇文章會用「用途、產生時機、能不能部署」三個角度，幫你一次把觀念釐清。",[416,417],"hr",{},[358,419,420],{"id":420},"一句話先抓住核心差別",[372,422,423],{},"在 Nuxt 專案中，這兩個資料夾的角色非常明確：",[381,425,428],{"className":426,"code":427,"language":386},[384],".nuxt    = 開發與編譯過程中的暫存資料夾\n.output  = production 環境實際部署的產物\n",[363,429,427],{"__ignoreMap":389},[372,431,432],{},"只要記住這一句，後面九成的部署問題都會自然消失。",[416,434],{},[358,436,438,440],{"id":437},"nuxt-是什麼",[363,439,365],{}," 是什麼？",[372,442,443,445,446,449],{},[363,444,365],{}," 是 ",[376,447,448],{},"Nuxt 在開發與建置過程中，自動產生的內部編譯目錄","。",[372,451,452],{},"當你在專案中執行：",[381,454,458],{"className":455,"code":456,"language":457,"meta":389,"style":389},"language-bash shiki shiki-themes github-dark","nuxi dev\n","bash",[363,459,460],{"__ignoreMap":389},[461,462,465,469],"span",{"class":463,"line":464},"line",1,[461,466,468],{"class":467},"svObZ","nuxi",[461,470,472],{"class":471},"sU2Wk"," dev\n",[372,474,475,476,479],{},"Nuxt 就會建立一個 ",[363,477,478],{},".nuxt/"," 資料夾，作為整個開發流程的工作空間。",[416,481],{},[358,483,485,487],{"id":484},"nuxt-裡面實際放了哪些東西",[363,486,365],{}," 裡面實際放了哪些東西？",[372,489,490,491,493],{},"一個常見的 ",[363,492,365],{}," 結構會長得像這樣：",[381,495,498],{"className":496,"code":497,"language":386},[384],".nuxt/\n ├── components.d.ts\n ├── imports.d.ts\n ├── app.config.mjs\n ├── dist/\n └── nitro/\n",[363,499,497],{"__ignoreMap":389},[372,501,502],{},"這裡面包含的並不是「你要部署的檔案」，而是 Nuxt 在運作時需要的中介資料，例如：",[394,504,505,508,511,514,517,520],{},[397,506,507],{},"自動 import 的對應表",[397,509,510],{},"components 註冊資訊",[397,512,513],{},"型別宣告（TypeScript）",[397,515,516],{},"virtual modules",[397,518,519],{},"dev 模式用的 runtime metadata",[397,521,522],{},"開發期間產生的暫時 build 結果",[416,524],{},[358,526,528,530],{"id":527},"nuxt-的本質是什麼",[363,529,365],{}," 的本質是什麼？",[372,532,533,534,536],{},"你可以把 ",[363,535,365],{}," 想成：",[538,539,540],"blockquote",{},[372,541,542],{},"Nuxt 自己使用的「工作目錄」",[372,544,545],{},"它的角色其實就跟其他框架的暫存資料夾一樣，例如：",[381,547,550],{"className":548,"code":549,"language":386},[384],".next                  (Next.js)\nnode_modules/.vite     (Vite)\ndist-temp\n",[363,551,549],{"__ignoreMap":389},[372,553,554,555],{},"這些資料夾都有一個共通點：\n",[376,556,557],{},"它們是框架用來工作的，不是給你部署的。",[416,559],{},[358,561,361,563,565],{"id":562},"為什麼-nuxt-不該被-commit-或部署",[363,564,365],{}," 不該被 commit 或部署？",[372,567,568,570],{},[363,569,365],{}," 有幾個非常重要的特性：",[372,572,573,574,577,578,449],{},"首先，它是 ",[376,575,576],{},"可被重建的產物","。\n只要你的原始碼存在，Nuxt 就能隨時重新產生 ",[363,579,365],{},[372,581,582,583,585,586,589],{},"因此，",[363,584,365],{}," 通常都會被加進 ",[363,587,588],{},".gitignore","：",[381,591,594],{"className":592,"code":593,"language":386},[384],".nuxt\n",[363,595,593],{"__ignoreMap":389},[372,597,598,599,601],{},"再來，它並不是 production build。\n即使你在 build 階段看到 ",[363,600,365],{}," 被使用，那也只是中途站，並不是最終結果。",[372,603,604],{},[376,605,606,607,609],{},"結論很簡單：",[363,608,365],{}," 不能、也不該被拿來部署。",[416,611],{},[358,613,615,440],{"id":614},"output-是什麼",[363,616,369],{},[372,618,619,621],{},[363,620,369],{}," 則完全是另一個層級的存在。",[372,623,624,625,449],{},"它是 ",[376,626,627],{},"Nuxt 在 production build 完成後，產生的最終部署產物",[372,629,630],{},"這個資料夾只會在你執行以下指令時出現：",[381,632,634],{"className":455,"code":633,"language":457,"meta":389,"style":389},"nuxi build\n",[363,635,636],{"__ignoreMap":389},[461,637,638,640],{"class":463,"line":464},[461,639,468],{"class":467},[461,641,642],{"class":471}," build\n",[416,644],{},[358,646,648,650],{"id":647},"output-的實際結構",[363,649,369],{}," 的實際結構",[372,652,653,654,656],{},"一個標準的 ",[363,655,369],{}," 目錄通常會長這樣：",[381,658,661],{"className":659,"code":660,"language":386},[384],".output/\n ├── public/\n │    └── _nuxt/\n └── server/\n      ├── index.mjs\n      └── chunks/\n",[363,662,660],{"__ignoreMap":389},[372,664,665],{},"這個結構本身，就已經在暗示它的用途。",[416,667],{},[358,669,671,674],{"id":670},"outputpublic-在做什麼",[363,672,673],{},".output/public"," 在做什麼？",[372,676,677,679],{},[363,678,673],{}," 裡面放的是：",[538,681,682],{},[372,683,684],{},"給瀏覽器下載的前端資源",[372,686,687],{},"也就是：",[394,689,690,693,696,699],{},[397,691,692],{},"JavaScript bundle",[397,694,695],{},"CSS",[397,697,698],{},"圖片與靜態資源",[397,700,701],{},"Vite build 後的產物",[372,703,704],{},"這些檔案會被伺服器直接送給使用者的瀏覽器。",[416,706],{},[358,708,710,713],{"id":709},"outputserver-是真正的-nitro-server",[363,711,712],{},".output/server"," 是真正的 Nitro Server",[372,715,716,718,719,449],{},[363,717,712],{}," 則是 ",[376,720,721],{},"Nitro 在 production 模式下產生的伺服器程式碼",[372,723,724],{},"其中最重要的一個檔案是：",[381,726,729],{"className":727,"code":728,"language":386},[384],"index.mjs\n",[363,730,728],{"__ignoreMap":389},[372,732,733],{},"這個檔案本身就是一個完整可執行的 server entry，你可以直接在 VPS 上這樣跑：",[381,735,737],{"className":455,"code":736,"language":457,"meta":389,"style":389},"node .output/server/index.mjs\n",[363,738,739],{"__ignoreMap":389},[461,740,741,744],{"class":463,"line":464},[461,742,743],{"class":467},"node",[461,745,746],{"class":471}," .output/server/index.mjs\n",[372,748,749],{},"這也是為什麼 Nuxt 能夠被部署到 VPS、Serverless、Edge 平台的關鍵。",[416,751],{},[358,753,754],{"id":754},"用工程師角度對照兩者差異",[756,757,758,776],"table",{},[759,760,761],"thead",{},[762,763,764,768,772],"tr",{},[765,766,767],"th",{},"項目",[765,769,770],{},[363,771,365],{},[765,773,774],{},[363,775,369],{},[777,778,779,791,802,813,823,834],"tbody",{},[762,780,781,785,788],{},[782,783,784],"td",{},"主要用途",[782,786,787],{},"開發與編譯暫存",[782,789,790],{},"production 部署",[762,792,793,796,799],{},[782,794,795],{},"產生時機",[782,797,798],{},"dev / build",[782,800,801],{},"build",[762,803,804,807,810],{},[782,805,806],{},"是否可部署",[782,808,809],{},"❌",[782,811,812],{},"✅",[762,814,815,818,820],{},[782,816,817],{},"是否建議 commit",[782,819,809],{},[782,821,822],{},"視部署策略",[762,824,825,828,831],{},[782,826,827],{},"前端 bundle",[782,829,830],{},"不完整",[782,832,833],{},"完整",[762,835,836,839,842],{},[782,837,838],{},"Nitro server",[782,840,841],{},"dev runtime",[782,843,844],{},"production runtime",[416,846],{},[358,848,850],{"id":849},"nuxt-真實的-build-pipeline","Nuxt 真實的 build pipeline",[372,852,853],{},"理解這個流程非常重要：",[381,855,858],{"className":856,"code":857,"language":386},[384],"Nuxt 專案原始碼\n     ↓\n產生 .nuxt（內部編譯資料）\n     ↓\nVite build + Nitro build\n     ↓\n.output（最終部署產物）\n",[363,859,857],{"__ignoreMap":389},[372,861,862],{},"也就是說：",[381,864,867],{"className":865,"code":866,"language":386},[384],".nuxt 是過程\n.output 是結果\n",[363,868,866],{"__ignoreMap":389},[416,870],{},[358,872,873],{"id":873},"一個最好記的心法",[372,875,876],{},"如果你只想記一句話：",[381,878,881],{"className":879,"code":880,"language":386},[384],".nuxt   = build workspace\n.output = deploy artifact\n",[363,882,880],{"__ignoreMap":389},[416,884],{},[358,886,888],{"id":887},"回到實際部署情境vps-zeabur-nitro","回到實際部署情境（VPS / Zeabur / Nitro）",[372,890,891],{},"在你目前的使用情境中：",[394,893,894,897,900],{},[397,895,896],{},"使用 VPS",[397,898,899],{},"自行跑 Nitro server",[397,901,902],{},"Nuxt production 環境",[372,904,905],{},"你真正需要的，只有這個資料夾：",[381,907,910],{"className":908,"code":909,"language":386},[384],".output\n",[363,911,909],{"__ignoreMap":389},[372,913,914,916],{},[363,915,365],{}," 完全不需要，也不該出現在正式環境。",[416,918],{},[358,920,921],{"id":921},"一個最小可行的部署範例",[372,923,924],{},"在伺服器上，你實際會做的事情通常只有兩步：",[381,926,928],{"className":455,"code":927,"language":457,"meta":389,"style":389},"nuxi build\nnode .output/server/index.mjs\n",[363,929,930,936],{"__ignoreMap":389},[461,931,932,934],{"class":463,"line":464},[461,933,468],{"class":467},[461,935,642],{"class":471},[461,937,939,941],{"class":463,"line":938},2,[461,940,743],{"class":467},[461,942,746],{"class":471},[416,944],{},[358,946,947],{"id":947},"新手最常犯的三個錯誤",[372,949,950,951,953,954,956,957,959],{},"第一個錯誤，是把 ",[363,952,365],{}," 當成 build 完成的結果。\n第二個錯誤，是把 ",[363,955,365],{}," 上傳到 server。\n第三個錯誤，是以為 ",[363,958,369],{}," 只是暫存資料而刪掉它。",[372,961,962],{},"只要你能避開這三點，Nuxt 部署的難度會直接下降一個等級。",[416,964],{},[358,966,967],{"id":967},"結語",[372,969,970,366,972,974,975,449],{},[363,971,365],{},[363,973,369],{}," 的差別，並不是「資料夾名稱不同」這麼簡單，而是 ",[376,976,977],{},"Nuxt 架構設計的核心分工",[372,979,980],{},"當你真正理解：",[394,982,983,986],{},[397,984,985],{},"哪些是框架的工作資料",[397,987,988],{},"哪些是你要負責部署的產物",[372,990,991],{},"很多原本看起來很神祕的部署問題，其實都會迎刃而解。",[993,994,995],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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);}",{"title":389,"searchDepth":938,"depth":938,"links":997},[998,1000,1001,1003,1005,1007,1009,1011,1013,1015,1017,1018,1019,1020,1021,1022,1023],{"id":360,"depth":938,"text":999},"為什麼 .nuxt 與 .output 是理解 Nuxt 架構的關鍵？",{"id":420,"depth":938,"text":420},{"id":437,"depth":938,"text":1002},".nuxt 是什麼？",{"id":484,"depth":938,"text":1004},".nuxt 裡面實際放了哪些東西？",{"id":527,"depth":938,"text":1006},".nuxt 的本質是什麼？",{"id":562,"depth":938,"text":1008},"為什麼 .nuxt 不該被 commit 或部署？",{"id":614,"depth":938,"text":1010},".output 是什麼？",{"id":647,"depth":938,"text":1012},".output 的實際結構",{"id":670,"depth":938,"text":1014},".output/public 在做什麼？",{"id":709,"depth":938,"text":1016},".output/server 是真正的 Nitro Server",{"id":754,"depth":938,"text":754},{"id":849,"depth":938,"text":850},{"id":873,"depth":938,"text":873},{"id":887,"depth":938,"text":888},{"id":921,"depth":938,"text":921},{"id":947,"depth":938,"text":947},{"id":967,"depth":938,"text":967},"很多人在部署 Nuxt 時卡關，其實問題不在伺服器，而是沒搞清楚 .nuxt 與 .output 的角色差異。本文從用途、產生時機與部署觀點，完整解析這兩個資料夾。","md",null,{"tags":1028,"category":203,"date":1032},[128,1029,1030,801,1031],"nitro","deployment","frontend","2026-02-11",true,{"title":150,"description":1024},"Hf_dNVqKrb7AxI3emO5rFhmi1qKfB8qJ7Eii_G7H1G4",[1037,1039],{"title":146,"path":147,"stem":148,"description":1038,"children":-1},"深入理解 Nitro 在 Nuxt 中的角色，為什麼它不是 Express，以及它如何讓同一份 Nuxt 專案同時支援 Node、Serverless 與 Edge。",{"title":154,"path":155,"stem":156,"description":1040,"children":-1},"從實際開發與部署流程出發，深入理解 nuxi dev、nuxi build 與 nuxi preview 在 Nuxt 中各自扮演的角色，以及它們背後的 runtime 差異。",1776690843119]