LESSON-19 · TOPIC 04

development 與 production build

能依除錯或正式產物選擇 vue.global.js 與 vue.global.prod.js,並從檔名證明選擇。

code-editVue CDN 應用邊界與載入|development 與 production build本頁只練一個責任

本頁只練什麼

能依除錯或正式產物選擇 vue.global.js 與 vue.global.prod.js,並從檔名證明選擇。

development build 提供警告便於學習;正式頁若持續使用它會帶入額外檢查與 production tip。

要修改的檔案:files/starter/index.html

定位:先看檔名是否含 .prod,再確認版本片段完全相同。|依 module-4 定位,只修改「development 與 production build」的責任。

任務情境

先結果,再原理;完成後要能說出自己看見的證據。

現在的問題

公開頁 Console 持續出現 Vue development build 提示,團隊以為是功能錯誤。

起始狀態:兩個候選 URL 尚未分出用途。

完成後要看到

devFile=vue.global.js、prodFile=vue.global.prod.js、chosen=production、sameVersion=true。

驗收證據:devFile、prodFile、sameVersion=true、chosen=production

何時會用到

開發除錯時選 development;產製可部署靜態 artifact 時選 production。

常見混淆:production build 不是自動部署,也不會壓縮自己的應用程式;只是 Vue runtime 發布檔不同。

觀念與最小範例

這段程式是理解起點,不是要你直接跳過 Starter。

development 與 production build Vue development and production global builds

上課用會提醒你的版本找錯;交付網站用精簡正式版,但兩個都必須是同一個 3.5.40。

正式說法:Vue global development build 含開發診斷;`.prod.js` 是 production-optimized distribution,兩者 API 版本應一致。

開發 vue.global.js;正式 vue.global.prod.js;兩者 URL 都固定 vue@3.5.40。

三步完成本主題

每一步都留下可觀察結果;如果沒看到,先看「卡住先查」。

  1. Step 1|先看見目前缺口,不急著貼答案。

    檔案:files/starter/index.html 定位:先看檔名是否含 .prod,再確認版本片段完全相同。

    要做:先重新載入 Starter,記錄目前畫面、DOM、Computed、Console 或文件內容。

    預期:能指出「先看檔名是否含 .prod,再確認版本片段完全相同。」目前的缺口。

    證據:保存 files/starter/index.html 的目前狀態,並指出下一步只會修改哪個檔案責任。

    卡住先查:確認開啟的是 files/starter/index.html,且定位到 先看檔名是否含 .prod,再確認版本片段完全相同。。

  2. Step 2|只修改本主題的一個責任。

    檔案:files/starter/index.html 定位:先看檔名是否含 .prod,再確認版本片段完全相同。

    要做:解析兩個固定 URL 的 pathname/版本,確認正式選擇為 production 檔。

    預期:devFile=vue.global.js、prodFile=vue.global.prod.js、chosen=production、sameVersion=true。

    證據:devFile、prodFile、sameVersion=true、chosen=production

    卡住先查:先看檔名是否含 .prod,再確認版本片段完全相同。

  3. Step 3|重新載入並以證據驗收,不以『看起來差不多』判定完成。

    檔案:files/starter/index.html 定位:先看檔名是否含 .prod,再確認版本片段完全相同。

    要做:重新整理頁面,再逐項比對預期結果與 evidence。

    預期:devFile=vue.global.js、prodFile=vue.global.prod.js、chosen=production、sameVersion=true。

    證據:devFile、prodFile、sameVersion=true、chosen=production

    卡住先查:先看檔名是否含 .prod,再確認版本片段完全相同。

觀察示範

這個示範只讓你看懂概念,不會替你修改 Starter,也不會自動宣告完成。

development 與 production buildruntime fixture · read-only demo
本主題示範畫面:

驗收證據

勾選只是學習紀錄;真正完成仍要回到 Starter 的實際結果。

提示 1|方向

比較 URL 最後檔名,不以檔案大小猜。

提示 2|關鍵片段

dev 應是 vue.global.js;正式應是 vue.global.prod.js。

提示 3|完整解答與原因

完整解答與原因:兩個 URL 都固定 3.5.40,但開發選 vue.global.js 取得診斷,正式 artifact 選 vue.global.prod.js;檔名與版本共同留下可驗證證據。

完成後進入下一階段,或回到入口選下一個 topic。

開始 Starter →回到主題清單