第 8 章 從零打造你的網站——以 vista.tw 與 solo.tw 為例 - 零基礎學 Vibe Coding讀者專區 跳至主要內容

《零基礎學 Vibe Coding》讀者專區

第 8 章 從零打造你的網站——以 vista.tw 與 solo.tw 為例

內容型網站與互動式應用的兩種策略、部署與 SEO

提示詞範本(26 則)

把方括號〔〕裡的內容換成你自己的情況,整段複製貼給 AI 就能用。

類別二、網站與前端切版

10. 產出一個 landing page 的整體骨架

什麼時候用你要做一個介紹產品或服務的單頁網站,想先有個完整的區塊架構。

請幫我做一個〔產品或服務,例如:線上瑜伽課程〕的 landing page(單頁介紹網站)。請先規劃整個頁面由上到下有哪些區塊(例如主視覺、痛點、方案介紹、見證、常見問題、報名),每個區塊放什麼內容,再依這個結構做出來。整體風格要〔乾淨專業/溫暖親切/活潑年輕,擇一〕。

先要區塊清單,再要成品。這樣你能在它動工前就調整順序,比做完再搬省事很多。

11. 設計吸睛的 hero 主視覺區

什麼時候用訪客打開網頁第一眼看到的區塊,你想讓它一秒抓住人的注意力。

請幫我設計網頁最上方的 hero 區(主視覺區)。主標題要傳達「〔你的核心賣點,例如:三個月從零學會做自己的網站〕」,下面放一句補充說明和一顆明顯的行動按鈕(例如「免費報名」)。版面要留白舒服、標題字夠大夠醒目,手機上也要好看。先給我 3 個不同語氣的主標題讓我挑。

hero 區是全站最重要的黃金位置。讓 AI 先給你幾個標題選項,別讓它一次定稿,你會有更多好句子可挑。

12. 做一個好用的導覽列

什麼時候用網站需要頂部選單,讓訪客能在不同區塊或頁面之間跳轉。

請幫我做一個網站頂部的導覽列(navbar)。左邊放〔網站名稱或 logo 文字〕,右邊放這幾個連結:〔首頁、關於、方案、聯絡〕,最右邊一顆行動按鈕「〔立即報名〕」。手機上要收合成漢堡選單(點一下才展開)。捲動頁面時導覽列要固定在最上方。

「手機上收合成漢堡選單」這句一定要講。不然導覽列在小螢幕上會擠成一團,這是新手最常忽略的細節。

13. 補上一個完整的頁尾

什麼時候用網站最下方需要放版權、聯絡方式與次要連結的區塊。

請幫我做網站最下方的頁尾(footer)。內容包含:〔品牌名稱與一句 slogan〕、幾個次要連結(隱私政策、服務條款、聯絡我們)、社群媒體圖示連結、以及最下面一行版權宣告「© 2026 〔你的名稱〕」。整體用比較低調的深色底,文字不要搶眼。

頁尾雖然不起眼,卻是訪客找隱私政策、聯絡方式的地方。如果缺了它,網站會有種沒做完的感覺。

14. 讓網頁在手機上也好看(手機優先)

什麼時候用你做好的頁面在電腦上正常,但在手機上跑版、擠成一團。

我這個頁面在手機上顯示會跑版。請幫我改成手機優先的響應式設計(responsive):先確保在窄螢幕(手機)上排版正常、文字不會太小、按鈕好按,再往上適配平板和電腦。請特別檢查圖片會不會超出畫面、以及左右會不會有多餘的橫向捲動。

現在大多數訪客都用手機看網頁。養成先想手機、再想電腦的習慣,可以省下大量事後補救的功夫。

15. 加上深色模式切換

什麼時候用你想讓網站能在明亮與深色兩種外觀之間切換,照顧不同使用者習慣。

請幫我的網站加上深色模式(dark mode)。放一個切換按鈕,點一下就在亮色和深色之間切換,並記住使用者的選擇(下次來還是同一個模式)。切換時請確認:所有文字在兩種模式下都清楚可讀、背景和文字的對比夠強、按鈕和圖片也都要跟著調整,不要有某塊在深色下變成一片黑看不到字。

深色模式最常翻車的地方是某段文字在深色底下還是深色,變成隱形。務必請 AI 兩種模式都逐一檢查文字顏色。

16. 加上克制、不干擾的進場動畫

什麼時候用你想讓頁面元素在捲動時優雅地淡入,但又怕動得太浮誇很廉價。

請幫我的頁面加上克制的進場動畫:當使用者往下捲動、某個區塊進入畫面時,讓它輕柔地淡入並微微上移。動畫要低調、快速(不要讓人等)、有質感,絕對不要那種閃爍、旋轉、彈跳的浮誇效果。同一個區塊只播一次,不要每次捲到都重播。

動畫的最高境界是你感覺得到質感,卻說不出哪裡有改動。跟 AI 強調克制、有質感,比放任它自由發揮安全得多。

17. 調出有質感的字體與間距

什麼時候用畫面內容都對,但整體看起來就是很陽春、少了設計感。

我的頁面內容都對了,但看起來很陽春、沒有設計感。請只調整字體與間距來提升質感:選一組耐看的字體搭配、拉開標題和內文的字級差距、增加行距讓文字更好讀、放大區塊之間的留白讓版面呼吸。內容和功能都不要動,只優化視覺質感。

留白和字級對比,是業餘與專業的分水嶺。很多時候頁面不好看,不是缺東西,而是東西塞太滿、擠太緊。

18. 檢查並修正無障礙對比

什麼時候用你想確認網站上的文字,讓所有人(包含視力較弱者)都看得清楚。

請幫我檢查整個頁面的文字可讀性(無障礙對比)。找出所有文字顏色和背景顏色對比不夠、看起來吃力的地方,例如淺灰字配白底、彩色按鈕上的文字看不清等。列出有問題的位置,並幫我調整到清楚好讀的程度,同時盡量保留原本的設計風格。

淺灰配白底是最常見的地雷,設計師覺得高級,長輩和陽光下的手機使用者卻看得很痛苦。對比清楚永遠比淡淡的很美重要。

19. 複製一個網站給我的氣質

什麼時候用你看到某個網站的風格很喜歡,想做出類似感覺但屬於自己的版本。

我很喜歡〔某個網站或風格,例如:Apple 官網那種簡潔高級感〕的氣質。請不要照抄,而是抓出它讓人覺得高級的幾個關鍵特徵(例如大量留白、克制的配色、精緻的字體、簡潔的排版),把這些特徵套用到我的〔你的網站主題〕上,做出屬於我自己、但有同樣質感的版面。

講氣質和特徵,而不是照抄。這樣做出來是你的品味長進了,而不只是複製別人的畫面。

20. 把設計稿或擷圖描述成頁面

什麼時候用你腦中或手邊有個畫面樣子(草圖、擷圖或參考圖),想讓 AI 照著做出來。

我想做一個像這樣的畫面:〔詳細描述版面,例如:最上面一張大圖,圖上疊白色大標題;中間三欄並排的方塊,每欄有一個圖示、一個小標、兩行說明;最下面一顆置中的按鈕〕。請照這個描述做出來,用〔你偏好的配色〕,並確保手機上三欄會自動變成上下堆疊。

描述版面時,用「上面、中間或下面」「左邊、右邊」「幾欄並排」這種空間方位詞,AI 最容易抓對位置。附上擷圖效果更好。網站不是一張靜態海報,訪客會點、會填、會滑。這一關講的是那些會動、會回應你的小零件:表單、彈窗、選單或表格。就像家裡的開關和門把,它們不起眼,但只要一個不好用,整個體驗就毀了。這幾條範本教你把細節交代清楚,讓每個互動都順手。

類別十、部署與上線

86. 帶我一步步部署

什麼時候用你第一次要把做好的東西放上網,完全不知道從哪開始。

我完全沒有部署過任何東西,想把「〔專案名稱〕」放到網路上讓別人用網址打開。請當我的導遊,一步一步帶我做,每次只給我一個步驟,用白話說明這一步要做什麼、我會看到什麼畫面、成功的樣子長怎樣?我完成並回報後,你再給下一步。

關鍵是每次只給一步。道理很簡單,如果一次給你十個步驟,你很可能會在第三步就迷路。所以慢慢來,一步一確認,反而最快。

87. 選擇部署平臺

什麼時候用你聽過一堆部署服務的名字,但不知道自己的專案該用哪個。

我做的是「〔簡述你的專案類型,例如純網頁、有登入功能、有資料庫〕」,預算希望是〔免費/每月可接受金額〕。請推薦兩到三個適合新手的部署平臺,用表格比較它們的難易度、免費額度以及適合的情境,最後給我一句「以你的狀況我推薦哪一個」的結論。

新手起步先求免費、好上手,別一開始就追求功能最強。等你真的需要更多,再換也不遲。

88. 設定環境變數

什麼時候用程式需要用到密碼或金鑰,你知道不能寫死在程式裡,但不會設定。

我的專案有一些不能公開的資訊(例如 API 金鑰、密碼),聽說要放在環境變數裡,而不是寫在程式碼中。請先用白話解釋環境變數是什麼、為什麼比較安全,再一步一步教我在〔你用的部署平臺〕上設定它,並告訴我程式裡要怎麼改成去讀取這些變數?

環境變數就像保險箱:程式知道去保險箱拿鑰匙,但鑰匙本身不會被寫進到處流傳的程式碼裡。這是資安的基本功。

89. 綁自訂網域

什麼時候用你的網站現在是一串又長又醜的網址,你想換成自己的品牌網域。

我想把我的網站從現在的預設網址,換成我自己的網域〔你的網域,例如 vista.tw〕。我的網域是在〔購買網域的地方〕買的,部署在〔你的部署平臺〕。請一步一步教我怎麼設定,包含我需要去哪裡改什麼、大概要等多久生效、以及怎麼確認綁定成功了。

網域設定改完通常不會立刻生效,可能要等幾分鐘到幾小時,這叫生效等待。別以為沒成功就一直亂改,先等一下再驗。

90. 部署失敗時怎麼問

什麼時候用你按下部署,結果跳出一堆紅字錯誤,整個人慌了。

我在部署時失敗了,跳出下面這段錯誤訊息。請先用白話告訴我這大概是什麼問題、嚴不嚴重,再列出最可能的兩到三個原因,並從最可能的開始,一次給我一個解法讓我試。我試完會回報結果,你再決定下一步。  〔完整貼上錯誤訊息〕

部署錯誤訊息一定要整段完整貼給 AI,別自己擷取一半。那串看似天書的紅字,往往第一行就藏著真正的病因。

91. 確認線上版真的更新了

什麼時候用你改了東西又重新部署,但打開網頁好像還是舊的,不確定到底更新了沒。

我重新部署後,不確定線上的版本有沒有真的更新(畫面看起來還是舊的)。請教我幾個確認方法:怎麼判斷部署是否真的成功、瀏覽器的快取(Cache)可能怎麼騙我、以及怎麼強制看到最新版。請用新手能操作的步驟說明。

常見的假象是瀏覽器把舊畫面存起來給你看。用無痕視窗打開,或強制重新整理,通常就能看到真正的最新版。

92. 上線後基本監控

什麼時候用東西上線了,你想知道萬一壞掉或沒人用,怎麼第一時間發現?

我的網站已經上線。我不是工程師,但想做最基本的監控,避免它壞掉了我卻不知道。請推薦一到兩個適合新手、最好有免費方案的簡單做法,能在網站掛掉時通知我。用白話說明怎麼設定、以及它會怎麼提醒我。

對新手來說,網站掛了會自動寄信通知我,這一件事就夠用了。先求有、再求好,別一開始就想搭一套複雜的儀表板。

93. 把部署步驟寫成我看得懂的清單

什麼時候用這次好不容易部署成功了,你想把流程記下來,下次自己也能重來一遍。

我們剛剛成功把專案部署上線了。請把整個過程整理成一張我看得懂的步驟清單,用白話寫,每一步包含做什麼、在哪裡做、成功長怎樣?特別標出這次卡關過、下次要小心的地方。我要把它存起來,當作以後每次上線的說明書。

部署流程很容易做完就忘。趁記憶新鮮請 AI 幫你寫成說明書,下次就不必再從零摸索,也不用每次都重新問。網站做好了、也上線了,接下來的問題是:別人怎麼找到它?分享到社群時,為什麼有的連結會跳出漂亮的預覽圖,有的只有一串冷冰冰的網址?這一類提示詞不談通用文案,而是教你請 AI 幫網站做好被看見的技術設定,讓搜尋引擎和社群平臺都願意把你推出去。

類別十一、內容行銷與 SEO

94. 寫 SEO 友善的標題與描述

什麼時候用你想讓網頁在 Google 搜尋結果裡,標題和說明文字看起來吸引人又切題。

我的頁面是關於「〔頁面主題與目標客群〕」。請幫我寫出適合放進網頁的 SEO 標題(title)和描述(meta description),要包含大家會搜尋的關鍵字、控制在搜尋結果不會被截斷的長度、並且讓人有想點進去的衝動。給我兩組選擇,並告訴我這些文字實際上要放進程式的哪個位置。

標題和描述是你在 Google 上的門面。同一個排名,寫得誘人的那個就是比較多人點,這是免費卻常被忽略的關鍵。

95. 加上分享預覽(Open Graph)

什麼時候用你把網址貼到 LINE 或臉書,卻只顯示乾巴巴的連結,沒有圖也沒有標題。

我希望我的頁面被分享到臉書、LINE 或 Threads 時,能顯示漂亮的預覽(標題、說明或縮圖)。請教我加上 Open Graph 標籤:告訴我需要哪幾個標籤、每個代表什麼、實際的程式碼長怎樣、該放在檔案的哪裡,以及縮圖建議做多大尺寸。

設定完可以用臉書或 LINE 的官方分享偵錯工具驗證。有時預覽會被舊資料卡住,用偵錯工具重新抓一次通常就會更新。

96. 加上結構化資料

什麼時候用你想讓 Google 更看得懂你的頁面內容(例如這是文章、商品還是活動),有機會拿到更好的呈現。

我的頁面是「〔頁面類型,例如一篇文章/一個商品/一場活動〕」。請幫我加上對應的結構化資料(Structured Data),讓 Google 更容易理解頁面內容。用白話說明它是什麼、對我有什麼好處,給我可以直接用的程式碼,並告訴我怎麼驗證它有沒有寫對。

結構化資料就像幫你的頁面貼上標籤紙,主動告訴搜尋引擎我是什麼。寫完務必用 Google 的測試工具驗一次,格式錯了它會直接忽略。

97. 寫多語版本

什麼時候用你想把網站做成中、英文(或加日文)版本,讓不同語言的訪客都能看懂。

我想把「〔頁面名稱〕」做成中文和〔英文/日文〕的多語版本。請先用白話說明多語網站有哪幾種常見做法、各自的優缺點,再以新手好維護為原則推薦一種。然後教我怎麼設定,讓搜尋引擎知道這些是同一頁的不同語言版本,不會被當成重複內容。

多語不是只把文字翻過去就好,還要讓搜尋引擎知道版本之間的對應關係。這一步做對,你的英文頁才有機會被英文使用者搜到。

98. 搞懂 sitemap 與 robots

什麼時候用你聽過網站地圖和爬蟲設定,但不知道自己的小網站到底需不需要、該怎麼弄?

請用白話解釋 sitemap(網站地圖)和 robots.txt 這兩個東西是什麼、分別在幫我做什麼。以我這種「〔簡述你的網站規模,例如只有幾頁的個人網站〕」來說,需不需要設定?如果需要,請一步一步教我怎麼產生和放置,並告訴我怎麼確認 Google 有讀到。

網站地圖等於把你所有頁面列一張清單交給 Google,省得它自己慢慢找。就算是小網站,設一下也沒壞處。

99. 把賣點寫成頁面文案

什麼時候用你有一個產品或服務頁,但只列了功能,缺一段能打動人、又對搜尋友善的文案。

這是我的產品頁,目前只列了功能:〔貼上現有內容〕。目標客群是〔你的客群〕,他們最在意〔客群的痛點或渴望〕。請幫我把它改寫成能打動人的頁面文案,聚焦在這對客人有什麼好處,並自然帶入他們會搜尋的關鍵字,不要塞得很生硬。給我可直接替換的版本。

好文案講的是你會得到什麼,不是這個功能叫什麼?關鍵字要像鹽巴一樣自然融進句子,撒太多反而會被搜尋引擎當作作弊。

100. 無障礙與 SEO 一起顧

什麼時候用你想一次把更多人用得了和更容易被搜到這兩件事一起做好。

請幫我檢查這個頁面,同時從無障礙和 SEO 兩個角度找問題,因為我聽說它們常常互相加分。重點看:圖片的替代文字、標題層級的結構、連結文字有沒有意義。列出問題清單,每一項說明它同時影響無障礙和 SEO 的哪個部分,並給我修法。  〔貼上程式碼或網址〕

圖片替代文字是最典型的一石二鳥:視障者靠它讀圖,搜尋引擎也靠它認圖。把該寫的都寫好,兩邊同時受惠。前面十一類教你請 AI 做各種事,這一類更上一層:教你怎麼指揮 AI 這件事本身。同樣的任務,會下指令的人拿到的成果,往往跟不會下的人差了好幾個檔次。這些是進階玩家的內功心法:設定角色、劃定範圍、控制節奏、要它誠實。學會這些,AI 才真正變成聽你調度的軍團,而不是各自亂跑的散兵。

錯誤急救(12 條)

找不到一模一樣的沒關係,抓錯誤訊息的關鍵字對大方向就行。 完整清單與萬能救援句在卡關 FAQ。

五、Git 與版本控制類

CONFLICT 或程式碼裡出現 <<<<<<<、=======、>>>>>>>

你會在哪看到合併(merge)或拉取(pull)別人的更新後,Git 說有衝突,打開檔案看到這些箭頭符號夾著兩段程式碼。

白話意思同一個地方,你跟別人(或另一個版本)各改了一次,Git 不知道該聽誰的,請你來決定。

  • 兩個版本改到了同一行。
  • 拉取遠端更新前,本地也動過同一處。
我合併時出現 `CONFLICT`,檔案裡有 `<<<<<<<`、`=======`、`>>>>>>>` 這些符號。我是零基礎,看不懂哪段是誰的。請幫我解讀:`=======` 上面那段是誰的、下面那段是誰的,我該保留哪個、還是兩個都要。我把整段貼給你:〔貼上含箭頭符號的那一整段〕

那些箭頭符號是 Git 給你的選擇題,不是壞掉。`<<<<<<<` 到 `=======` 之間是你的版本,`=======` 到 `>>>>>>>` 之間是對方的。決定好之後要把三行箭頭符號一起刪掉。

Updates were rejected / push rejected(remote 有新東西)

你會在哪看到你想把改動推上去(push)時,被 Git 擋下來拒絕。

白話意思雲端上有你電腦裡還沒有的更新,Git 怕你蓋掉別人的東西,所以先擋住,要你先把新的拉下來。

  • 別人(或你在另一臺裝置)先推了新東西上去。
  • 你本地的版本落後於雲端。
我 push 時出現 `Updates were rejected`,看起來是雲端有我還沒有的更新。請一步步帶我安全地先把遠端的更新拉下來、跟我的合併好,再推上去。過程中如果會有衝突,請提醒我怎麼處理。

看到 push 被拒,標準動作是先 pull 再 push。別急著用 `--force` 硬推,那可能會蓋掉別人的心血。

You are in 'detached HEAD' state

你會在哪看到切換版本後,Git 提示你進入 detached HEAD 狀態。

白話意思你現在站在一個歷史上的某個舊存檔點,而不是在正常的工作線上,這裡改東西不會被好好記錄。

  • 直接切換到某個舊的提交(commit)而不是分支。
  • 誤操作跳到了歷史的某一點。
Git 說我在 `detached HEAD` 狀態。我不太確定自己是怎麼跑到這裡的,也怕改的東西不見。請用白話解釋這是什麼狀態、我現在該怎麼安全回到正常的分支,如果我剛剛有改東西,怎麼保住它。

detached HEAD 不危險,只是站錯位置。先別繼續改東西,讓 AI 帶你回到正常分支(通常是 main)再說。

不小心 commit 了大檔案或密鑰

你會在哪看到push 時因為檔案太大被拒,或你突然發現把密碼、金鑰之類的機密提交進去了。

白話意思有個不該進存檔的東西被記進版本歷史了,得把它請出去。

  • 忘了設定忽略清單(`.``gitignore`)。
  • 把裝相依套件的資料夾、影片、金鑰檔一起提交了。
我不小心把〔大檔案/含密碼的檔案〕commit 進去了,還沒(或已經)push。請告訴我:一、怎麼把它從版本記錄裡移除;二、怎麼設定 `.``gitignore` 以後不再提交它;三、如果裡面有密鑰,我是不是必須立刻去把那把金鑰作廢重發。請按嚴重程度排順序帶我做。

如果 commit 進去的是金鑰或密碼,就算你之後刪掉,也要當它「已經外洩」,第一件事是去平臺把那把金鑰作廢重發,不能只靠刪檔。

fatal: not a git repository

你會在哪看到在某個資料夾下打 Git 指令時,被回這句。

白話意思你現在站的這個資料夾,還沒被設定成 Git 的存檔專案,所以 Git 不知道要管哪裡。

  • 還沒對這個專案做初始化(`git ``init`)。
  • 你人在錯的資料夾,真正的專案在別的地方。
我打 Git 指令時出現 `fatal: not a git repository`。請幫我判斷是「這個專案還沒被 Git 初始化」,還是「我站錯資料夾了」。教我怎麼確認目前在哪個資料夾、以及該怎麼做才對。

先確認你的終端機「現在在哪個資料夾」(可以請 AI 教你用 `pwd` 或 `cd` 確認),很多時候只是走錯房間。

Authentication failed / Permission denied (publickey)

你會在哪看到push 或 pull 到 GitHub 等平臺時,說身分驗證失敗。

白話意思Git 不確定你是不是有權限的本人,把門關上了。

  • 密碼或存取權杖(token)過期、輸入錯誤。
  • 平臺已不接受密碼,改用 token 或金鑰(SSH key)。
  • 帳號沒有這個專案的權限。
我 push 到〔GitHub/其他平臺〕時出現 `Authentication failed`。我是零基礎。請幫我判斷現在該用哪種驗證方式(密碼、存取權杖、還是 SSH 金鑰),並一步步帶我設定好。我用〔Mac/Windows〕。

現在多數平臺已經不收帳號密碼,改用存取權杖或 SSH 金鑰。先問 AI 你的平臺現在要哪一種,再照著設定。部署(Deploy)就是把你本機做好的東西搬到網路上,讓全世界都連得到。經典魔咒是我電腦上明明好好的,一上線就壞。這一類專治這種水土不服。

六、部署類

Build failed(部署時建置失敗)

你會在哪看到把專案推上部署平臺(例如 Vercel、Cloudflare 或 Netlify)後,建置步驟中斷、顯示失敗。

白話意思平臺在幫你打包上線的過程中撞到錯誤,包不起來就上不了線。

  • 程式碼裡其實有錯誤,只是本機沒觸發。
  • 少裝了某個套件,或版本對不上。
  • 環境變數沒設定。
我部署到〔平臺名〕時出現 `Build failed`。我把完整的建置紀錄(build log)貼給你,請幫我找出真正卡住的那一行、代表什麼問題、怎麼修。紀錄如下:〔貼上整段 build log,尤其是紅字附近〕

部署平臺都會有一份完整的建置紀錄,真正的原因在裡面。把那整段貼給 AI,比只說「build 失敗」有用一百倍。

線上壞、本機好(環境變數沒設定)

你會在哪看到本機跑得好好的,上線後某些功能壞掉,尤其是連 API 或資料庫的部分。

白話意思你電腦裡有一份祕密設定檔(環境變數)沒被搬上線,線上版少了鑰匙就開不了那些門。

  • 本機的 `.env` 設定沒有同步到部署平臺。
  • 部署平臺上的變數名稱拼錯或漏設。
我的專案本機正常,但部署後〔某功能,例如登入、抓資料〕就壞了。我懷疑是環境變數沒設。請教我怎麼比對本機的 .env 跟部署平臺上設定的變數,找出漏掉哪些、怎麼在平臺上補齊。我用的平臺是〔平臺名〕。

若遇到本機好、線上壞的狀況,十之八九是環境變數沒搬上去。`.env` 檔通常不會被上傳,你得手動到部署平臺的設定裡一個一個補。

部署後 404 或重新整理就失效

你會在哪看到首頁打得開,但點進子頁面、或在子頁面按重新整理,就出現 404 找不到頁面。

白話意思伺服器不知道這些網站內部的路線該怎麼走,一重新整理就找不到路。

  • 單頁應用(SPA)的路由沒在伺服器端設定好。
  • 部署設定裡少了「把所有路徑導回首頁」的規則。
我的網站首頁正常,但點進內頁或按重新整理就 404。我猜是路由沒設定好。請幫我判斷這是不是單頁應用要加的「rewrite/redirect 規則」,並告訴我在〔平臺名〕上具體要加什麼設定。我用的框架是〔框架名,若知道〕。

這是前端網站部署的超經典坑。跟 AI 講清楚你用哪個平臺、哪個框架,它通常能直接給你那幾行設定貼上去就好。

部署成功了,但線上看不到更新(快取)

你會在哪看到你明明改好推上去了,打開網站卻還是舊的樣子。

白話意思你看到的是暫存的舊版本,新版還沒被你這邊的瀏覽器或平臺更新過來。

  • 瀏覽器快取(暫存)了舊檔案。
  • 平臺或 CDN 的快取還沒刷新。
  • 部署其實沒成功,你以為成功了。
我部署後線上還是舊的。請先教我怎麼強制重新整理、清掉瀏覽器快取,確認不是我這邊的問題,再教我怎麼確認部署到底有沒有真的成功、以及怎麼清掉平臺的快取。我用〔平臺名〕。

先用強制重新整理的方式,排除你自己瀏覽器的快取(Mac 按 Cmd+Shift+R,Windows 按 Ctrl+Shift+R)。如果還是舊的,才往平臺快取或部署沒成功去查。

Function execution timed out(函式逾時)

你會在哪看到線上某個功能(尤其是後端運算、呼叫 AI、處理大量資料)跑很久後失敗,說逾時。

白話意思這段程式跑太久,超過平臺允許的時間上限,被強制中斷。

  • 呼叫的外部服務回應太慢。
  • 一次處理太多資料。
  • 免費方案的時間限制較短。
我線上的〔功能名〕出現 `timed out`(逾時)。請幫我判斷是不是「這段做太多事、跑太久」,並給我兩種方向:一是怎麼讓它跑快一點,二是能不能把工作拆小或改成背景處理。我用〔平臺名〕,這段大概在做〔說明它在做什麼〕。

逾時通常代表一口氣做太多。跟 AI 討論能不能拆成小步驟,往往比硬調時間上限更根本。

Module not found(只在部署時發生)

你會在哪看到本機好好的,一部署就說找不到某個模組。

白話意思本機因為某些寬鬆設定沒發現的問題,在嚴格的線上環境現形了,常常是大小寫或漏裝。

  • 檔名大小寫不一致(你的電腦不分大小寫,但伺服器會分)。
  • 某個套件只裝在本機、沒被記進安裝清單。
我本機正常,但部署時出現 `Module not found: ``〔它說找不到的名字〕`。請重點幫我檢查兩件事:一、我 import 的檔名大小寫跟實際檔名有沒有完全一致;二、這個套件有沒有被正確記進 package.json。我用〔平臺名〕。

這個坑超常見:Mac 不分大小寫,但線上伺服器分。`Header` 跟 `header` 在你電腦上是同一個,上線後就變兩個。請 AI 特別幫你比對大小寫。當你的程式要用別人的服務(例如 :AI、地圖或金流),通常需要一把鑰匙(API 金鑰)來證明身分。這一類的錯誤,多半跟這把鑰匙有關:沒帶、帶錯、用太兇、或不小心弄丟。