[{"data":1,"prerenderedAt":1138},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-nuxt-dev-build-preview":352,"-nuxt-nuxt-dev-build-preview-surround":1133},[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":154,"body":354,"description":1119,"extension":1120,"links":1121,"meta":1122,"navigation":1130,"path":155,"seo":1131,"stem":156,"__hash__":1132},"docs/nuxt/nuxt_dev_build_preview.md",{"type":355,"value":356,"toc":1087},"minimark",[357,362,379,389,397,459,462,465,469,472,492,495,510,513,519,525,530,536,559,565,567,571,574,580,583,589,592,598,601,603,607,610,622,625,633,639,643,646,652,658,664,666,670,676,682,689,691,695,701,713,716,724,727,740,743,749,752,754,758,761,765,771,775,780,783,797,800,802,805,808,814,823,825,828,831,837,840,926,928,931,935,941,943,947,952,954,958,961,967,970,972,975,978,984,987,989,993,996,1009,1012,1018,1021,1026,1032,1034,1037,1052,1054,1057,1083],[358,359,361],"h2",{"id":360},"nuxt-devbuildpreview-的整體心智圖","Nuxt dev、build、preview 的整體心智圖",[363,364,365,366,370,371,374,375,378],"p",{},"在 Nuxt 專案中，你幾乎每天都會用到 ",[367,368,369],"code",{},"dev","，但真正要部署時，",[367,372,373],{},"build"," 與 ",[367,376,377],{},"preview"," 才是關鍵角色。先用一張簡化的心智圖來建立整體概念：",[380,381,386],"pre",{"className":382,"code":384,"language":385},[383],"language-text","開發模式        建置           模擬 production\nnuxi dev   →   nuxi build   →   nuxi preview\n","text",[367,387,384],{"__ignoreMap":388},"",[363,390,391,392,396],{},"三個指令其實對應的是三個",[393,394,395],"strong",{},"完全不同的階段與 runtime","。",[398,399,400,419],"table",{},[401,402,403],"thead",{},[404,405,406,410,413,416],"tr",{},[407,408,409],"th",{},"指令",[407,411,412],{},"用途",[407,414,415],{},"是否建置",[407,417,418],{},"是否 production",[420,421,422,435,447],"tbody",{},[404,423,424,427,430,433],{},[425,426,369],"td",{},[425,428,429],{},"開發",[425,431,432],{},"❌",[425,434,432],{},[404,436,437,439,442,445],{},[425,438,373],{},[425,440,441],{},"編譯專案",[425,443,444],{},"✅",[425,446,432],{},[404,448,449,451,454,457],{},[425,450,377],{},[425,452,453],{},"模擬部署",[425,455,456],{},"已建置",[425,458,444],{},[363,460,461],{},"理解這張表，後面很多部署問題都會自然消失。",[463,464],"hr",{},[358,466,468],{"id":467},"_1️⃣-nuxi-dev開發模式","1️⃣ nuxi dev（開發模式）",[363,470,471],{},"這是你在本地端最常使用的指令：",[380,473,477],{"className":474,"code":475,"language":476,"meta":388,"style":388},"language-bash shiki shiki-themes github-dark","nuxi dev\n","bash",[367,478,479],{"__ignoreMap":388},[480,481,484,488],"span",{"class":482,"line":483},"line",1,[480,485,487],{"class":486},"svObZ","nuxi",[480,489,491],{"class":490},"sU2Wk"," dev\n",[363,493,494],{},"或是透過 package.json：",[380,496,498],{"className":474,"code":497,"language":476,"meta":388,"style":388},"npm run dev\n",[367,499,500],{"__ignoreMap":388},[480,501,502,505,508],{"class":482,"line":483},[480,503,504],{"class":486},"npm",[480,506,507],{"class":490}," run",[480,509,491],{"class":490},[363,511,512],{},"在這個模式下，Nuxt 實際啟動的是：",[380,514,517],{"className":515,"code":516,"language":385},[383],"Vite dev server + Nuxt dev runtime\n",[367,518,516],{"__ignoreMap":388},[363,520,521,522,396],{},"也就是一個",[393,523,524],{},"專為開發體驗設計的環境",[526,527,529],"h3",{"id":528},"dev-模式的核心特性","dev 模式的核心特性",[363,531,532,533,535],{},"在 ",[367,534,369],{}," 模式中，Nuxt 會刻意犧牲效能，來換取開發速度與即時回饋：",[537,538,539,543,546,553,556],"ul",{},[540,541,542],"li",{},"支援 HMR（Hot Module Replacement）",[540,544,545],{},"不進行 minify 或最佳化",[540,547,548,549,552],{},"不產生 ",[367,550,551],{},".output"," 資料夾",[540,554,555],{},"所有 build 都發生在記憶體中",[540,557,558],{},"並非 production runtime",[363,560,561,562,396],{},"這代表它",[393,563,564],{},"從設計上就不是拿來部署的",[463,566],{},[526,568,570],{"id":569},"dev-模式實際在做什麼","dev 模式實際在做什麼？",[363,572,573],{},"當你打開瀏覽器：",[380,575,578],{"className":576,"code":577,"language":385},[383],"http://localhost:3000\n",[367,579,577],{"__ignoreMap":388},[363,581,582],{},"你連到的其實是：",[380,584,587],{"className":585,"code":586,"language":385},[383],"Vite dev server 即時編譯後的結果\n",[367,588,586],{"__ignoreMap":388},[363,590,591],{},"每當你存檔一次：",[380,593,596],{"className":594,"code":595,"language":385},[383],"只重新編譯被修改的檔案\n",[367,597,595],{"__ignoreMap":388},[363,599,600],{},"而不是整個專案。\n這正是 dev 模式「快」的來源，但也因此它與 production 行為並不完全一致。",[463,602],{},[358,604,606],{"id":605},"_2️⃣-nuxi-build建置","2️⃣ nuxi build（建置）",[363,608,609],{},"當你準備要部署時，第一步一定是：",[380,611,613],{"className":474,"code":612,"language":476,"meta":388,"style":388},"nuxi build\n",[367,614,615],{"__ignoreMap":388},[480,616,617,619],{"class":482,"line":483},[480,618,487],{"class":486},[480,620,621],{"class":490}," build\n",[363,623,624],{},"這個指令的職責只有一件事：",[626,627,628],"blockquote",{},[363,629,630],{},[393,631,632],{},"編譯專案，產生 production 用的檔案",[363,634,635,636,396],{},"它本身",[393,637,638],{},"不會啟動任何 server",[526,640,642],{"id":641},"build-階段實際發生的事情","build 階段實際發生的事情",[363,644,645],{},"在 build 過程中，Nuxt 會完成兩個主要任務：",[380,647,650],{"className":648,"code":649,"language":385},[383],"前端 bundle（由 Vite 處理）\nServer runtime（由 Nitro 編譯）\n",[367,651,649],{"__ignoreMap":388},[363,653,654,655,657],{},"最後產出一個標準的 ",[367,656,551],{}," 目錄：",[380,659,662],{"className":660,"code":661,"language":385},[383],".output\n ├── public      # client-side assets\n └── server      # Nitro server entry\n",[367,663,661],{"__ignoreMap":388},[463,665],{},[526,667,669],{"id":668},"build-的正確心智模型","build 的正確心智模型",[363,671,672,675],{},[367,673,674],{},"nuxi build"," 本質上就像：",[380,677,680],{"className":678,"code":679,"language":385},[383],"TypeScript compile\nDocker build\n",[367,681,679],{"__ignoreMap":388},[363,683,684,685,688],{},"它只是",[393,686,687],{},"準備好可以執行的產物","，但本身不負責「跑起來」。",[463,690],{},[358,692,694],{"id":693},"_3️⃣-nuxi-previewproduction-模擬","3️⃣ nuxi preview（production 模擬）",[363,696,697,698,700],{},"當 ",[367,699,551],{}," 已經存在後，你可以執行：",[380,702,704],{"className":474,"code":703,"language":476,"meta":388,"style":388},"nuxi preview\n",[367,705,706],{"__ignoreMap":388},[480,707,708,710],{"class":482,"line":483},[480,709,487],{"class":486},[480,711,712],{"class":490}," preview\n",[363,714,715],{},"這一步會：",[626,717,718],{},[363,719,720,721,723],{},"使用 ",[367,722,551],{}," 啟動 production server",[363,725,726],{},"在概念上，它幾乎等同於：",[380,728,730],{"className":474,"code":729,"language":476,"meta":388,"style":388},"node .output/server/index.mjs\n",[367,731,732],{"__ignoreMap":388},[480,733,734,737],{"class":482,"line":483},[480,735,736],{"class":486},"node",[480,738,739],{"class":490}," .output/server/index.mjs\n",[363,741,742],{},"也就是直接啟動：",[380,744,747],{"className":745,"code":746,"language":385},[383],"Nitro production server\n",[367,748,746],{"__ignoreMap":388},[363,750,751],{},"這一點非常關鍵。",[463,753],{},[358,755,757],{"id":756},"preview-與-dev-的本質差異","preview 與 dev 的本質差異",[363,759,760],{},"很多人會誤以為 preview 只是另一種 dev，但實際上兩者完全不同。",[526,762,764],{"id":763},"dev-使用的是","dev 使用的是",[380,766,769],{"className":767,"code":768,"language":385},[383],"Vite dev server\n",[367,770,768],{"__ignoreMap":388},[526,772,774],{"id":773},"preview-使用的是","preview 使用的是",[380,776,778],{"className":777,"code":746,"language":385},[383],[367,779,746],{"__ignoreMap":388},[363,781,782],{},"這代表：",[537,784,785,788,791,794],{},[540,786,787],{},"SSR 行為不同",[540,789,790],{},"Routing 行為不同",[540,792,793],{},"API runtime 不同",[540,795,796],{},"效能特性不同",[363,798,799],{},"preview 才是真正貼近「部署後」的狀態。",[463,801],{},[358,803,804],{"id":804},"一個實際的工程師日常流程",[363,806,807],{},"在實務上，你的工作流程通常會長這樣：",[380,809,812],{"className":810,"code":811,"language":385},[383],"撰寫功能\n↓\nnuxi dev\n↓\n確認畫面與互動\n↓\nnuxi build\n↓\nnuxi preview\n↓\n正式部署\n",[367,813,811],{"__ignoreMap":388},[363,815,816,817,819,820,396],{},"如果你省略 ",[367,818,377],{},"，等於是",[393,821,822],{},"直接在 production 環境測試",[463,824],{},[358,826,827],{"id":827},"三者差異快速記憶法",[526,829,830],{"id":830},"直覺版",[380,832,835],{"className":833,"code":834,"language":385},[383],"dev      = 即時開發環境\nbuild    = 編譯\npreview  = 模擬 production\n",[367,836,834],{"__ignoreMap":388},[526,838,839],{"id":839},"技術版",[398,841,842,855],{},[401,843,844],{},[404,845,846,849,851,853],{},[407,847,848],{},"功能",[407,850,369],{},[407,852,373],{},[407,854,377],{},[420,856,857,868,881,892,904,915],{},[404,858,859,862,864,866],{},[425,860,861],{},"Vite dev server",[425,863,444],{},[425,865,432],{},[425,867,432],{},[404,869,870,873,876,878],{},[425,871,872],{},"Nitro server",[425,874,875],{},"dev runtime",[425,877,373],{},[425,879,880],{},"production runtime",[404,882,883,886,888,890],{},[425,884,885],{},"HMR",[425,887,444],{},[425,889,432],{},[425,891,432],{},[404,893,894,897,899,901],{},[425,895,896],{},"minify",[425,898,432],{},[425,900,444],{},[425,902,903],{},"已完成",[404,905,906,908,910,912],{},[425,907,551],{},[425,909,432],{},[425,911,444],{},[425,913,914],{},"使用",[404,916,917,920,922,924],{},[425,918,919],{},"SSR production 行為",[425,921,432],{},[425,923,432],{},[425,925,444],{},[463,927],{},[358,929,930],{"id":930},"最常見的三個誤解",[526,932,934],{"id":933},"誤解一preview-dev","誤解一：preview = dev",[363,936,937,938,396],{},"不是。\npreview 啟動的是 ",[393,939,940],{},"production server",[463,942],{},[526,944,946],{"id":945},"誤解二build-會啟動網站","誤解二：build 會啟動網站",[363,948,949,950,396],{},"不會。\nbuild 只負責產生 ",[367,951,551],{},[463,953],{},[526,955,957],{"id":956},"誤解三preview-可有可無","誤解三：preview 可有可無",[363,959,960],{},"事實上它非常重要。\npreview 可以讓你在本機驗證：",[380,962,965],{"className":963,"code":964,"language":385},[383],"production SSR\nproduction routing\nproduction API\n",[367,966,964],{"__ignoreMap":388},[363,968,969],{},"這些都是 dev 模式無法完整模擬的。",[463,971],{},[358,973,974],{"id":974},"一個直覺的比喻",[363,976,977],{},"如果把 Nuxt 專案想成一本書：",[380,979,982],{"className":980,"code":981,"language":385},[383],"dev     → 寫稿\nbuild   → 排版印刷\npreview → 看印刷樣本\ndeploy  → 正式出版\n",[367,983,981],{"__ignoreMap":388},[363,985,986],{},"你不會直接把草稿拿去賣，Nuxt 也是一樣的道理。",[463,988],{},[358,990,992],{"id":991},"回到你的實際情境部署到-vps-zeabur","回到你的實際情境（部署到 VPS / Zeabur）",[363,994,995],{},"你最近的環境包含：",[537,997,998,1001,1004,1007],{},[540,999,1000],{},"VPS",[540,1002,1003],{},"Zeabur",[540,1005,1006],{},"Nuxt deploy",[540,1008,872],{},[363,1010,1011],{},"正確流程應該是：",[380,1013,1016],{"className":1014,"code":1015,"language":385},[383],"nuxi build\nnode .output/server/index.mjs\n",[367,1017,1015],{"__ignoreMap":388},[363,1019,1020],{},"而不是在 server 上執行：",[380,1022,1024],{"className":1023,"code":475,"language":385},[383],[367,1025,475],{"__ignoreMap":388},[363,1027,1028,1029,396],{},"這也是為什麼 production 環境下",[393,1030,1031],{},"不應該看到 HMR 或 Vite 的痕跡",[463,1033],{},[358,1035,1036],{"id":1036},"結語",[363,1038,1039,1040,1042,1043,374,1045,1047,1048,1051],{},"理解 ",[367,1041,369],{},"、",[367,1044,373],{},[367,1046,377],{}," 的差異，本質上是在理解 ",[393,1049,1050],{},"Nuxt 的三種 runtime","。\n只要心智模型建立正確，部署、SSR 問題與效能落差，幾乎都能迎刃而解。",[463,1053],{},[358,1055,1056],{"id":1056},"參考資料",[1058,1059,1060,1069,1076],"ol",{},[540,1061,1062,1063],{},"Nuxt 官方文件 — Commands Overview\n",[1064,1065,1066],"a",{"href":1066,"rel":1067},"https://nuxt.com/docs/getting-started/commands",[1068],"nofollow",[540,1070,1071,1072],{},"Nuxt 官方文件 — Deployment & Nitro\n",[1064,1073,1074],{"href":1074,"rel":1075},"https://nuxt.com/docs/guide/deploy",[1068],[540,1077,1078,1079],{},"Nitro 官方文件\n",[1064,1080,1081],{"href":1081,"rel":1082},"https://nitro.unjs.io/",[1068],[1084,1085,1086],"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":388,"searchDepth":1088,"depth":1088,"links":1089},2,[1090,1091,1096,1100,1101,1105,1106,1110,1115,1116,1117,1118],{"id":360,"depth":1088,"text":361},{"id":467,"depth":1088,"text":468,"children":1092},[1093,1095],{"id":528,"depth":1094,"text":529},3,{"id":569,"depth":1094,"text":570},{"id":605,"depth":1088,"text":606,"children":1097},[1098,1099],{"id":641,"depth":1094,"text":642},{"id":668,"depth":1094,"text":669},{"id":693,"depth":1088,"text":694},{"id":756,"depth":1088,"text":757,"children":1102},[1103,1104],{"id":763,"depth":1094,"text":764},{"id":773,"depth":1094,"text":774},{"id":804,"depth":1088,"text":804},{"id":827,"depth":1088,"text":827,"children":1107},[1108,1109],{"id":830,"depth":1094,"text":830},{"id":839,"depth":1094,"text":839},{"id":930,"depth":1088,"text":930,"children":1111},[1112,1113,1114],{"id":933,"depth":1094,"text":934},{"id":945,"depth":1094,"text":946},{"id":956,"depth":1094,"text":957},{"id":974,"depth":1088,"text":974},{"id":991,"depth":1088,"text":992},{"id":1036,"depth":1088,"text":1036},{"id":1056,"depth":1088,"text":1056},"從實際開發與部署流程出發，深入理解 nuxi dev、nuxi build 與 nuxi preview 在 Nuxt 中各自扮演的角色，以及它們背後的 runtime 差異。","md",null,{"tags":1123,"category":1128,"date":1129},[128,1124,1125,1126,1127],"nitro","vite","deploy","ssr","frontend","2026-02-11",true,{"title":154,"description":1119},"H5azNgV5qyPc4sgkNkMiQKXd3kxDCpp9oMtA7zWf6QE",[1134,1136],{"title":150,"path":151,"stem":152,"description":1135,"children":-1},"很多人在部署 Nuxt 時卡關，其實問題不在伺服器，而是沒搞清楚 .nuxt 與 .output 的角色差異。本文從用途、產生時機與部署觀點，完整解析這兩個資料夾。",{"title":158,"path":159,"stem":160,"description":1137,"children":-1},"深入探討 Nuxt Image 的優勢，包括自動優化、縮放、Lazy Loading 以及如何提升 Web Performance 和 Core Web Vitals。",1776690843273]