如果你一點程式或網頁觀念都不懂的程式小白,在使用Vibe Coding來開發「網頁」就一定保證必會遇上這個問題。
要知道,一個網站在上傳至雲端主機後運作,一定會面臨到一個問題那就是「快取」。
快取有分主機端、網站端、瀏覽器端,至少這三端的快取,在網頁更新了視覺排版或功能後,務必清除這三種快取,不然會有時候明明Ai幫你改的功能已完成但你仍然瀏覽到舊的狀態,會一直以為Ai不會改或改失敗,一直鬼打牆。
但有時候就算清了快取也沒辦法看到AiI修改後的狀態,對嗎?
沒錯,這件事更常遇上,也讓鬼打牆、質疑Ai質疑自己更加的嚴重。
一、用AI開發網頁版程式記得要求它每次都要更新js與css版號
開發網頁,一定會用到js與css,Ai一般會幫你建立數個js與css檔,這些都是「引用」的方式來置入你的網頁head處,以讓你的網頁擁有視覺排版與功能,但若當次Ai修改的地方有修改到js或css,那麼你修改後的js或css檔就算是正確的,但是在網頁正式瀏覽時很可能仍是舊的狀態效果。
重點來了,你務必要求Ai在每次更新修改時,一定要主動自動更新「js、css的版號」,這原理一時有點難以文字說明清楚,主要是概念就是這些js、css檔案也會被快取,當我們更新了它後面的v=XXXX的數字之後,網頁載入時會看到這些js、css檔案的版號有變動,它就會重新讀取 js、css檔案,這樣就不會發生明明已修改也清了快取但就是無法瀏覽到修改後的畫面。

二、利用全局要求就不用每次提醒Ai要更新版號
我自己是使用「Google Antigravity」來開發網頁再適時導用至WordPress架構中,而我在 「Google Antigravity」的全局設定中有一項是要求Ai每次修改後都要更新版號,它自己會用以時間戳當最新的版號,這樣就能保證網頁在瀏覽器預覽時一定可以瀏覽到剛剛所改好的最新狀態。

