iT邦幫忙

2023 iThome 鐵人賽

DAY 29
0
影片教學

Nuxt 3 快速入門系列 第 29

[影片教學] Nuxt 3 部署前的建構打包

  • 分享至 

  • xImage
  •  

Yes

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。


建構打包專案

使用 Nuxt CLI 的 build 指令來進行 Nuxt 3 網站的建構打包

npm run build

# 或者你也可以使用
npx nuxi@latest build

在本地測試打包好的網站

使用 Node.js 執行打包完成的入口檔案 .output/server/index.mjs

node .output/server/index.mjs

如果你的專案中有使用 .env 檔案建立環境變數,你可以使用 DotEnv 來協助載入。

node -r dotenv/config .output/server/index.mjs

部署前的檢查

  • UI 與流程邏輯
  • 網頁標題 (Title) 與網頁圖示 (favicon)
  • 使用到的圖片、字型或外部資源是否經過授權及可以商用
  • 每個頁面中的 Meta Tags 及 SEO 搜尋引擎最佳化的設定
  • 不同裝置與瀏覽器的 RWD 或相容性測試
  • 測試內部或外部的 API 是否正常運作
  • 測試使用的密鑰、憑證或最高權限等記得移除
  • 資安相關評估與測試
  • .env 檔案與環境變數的設置

感謝大家的閱讀,歡迎大家給予建議與討論,也請各位大大鞭小力一些:)
如果對這個 Nuxt 3 系列感興趣,可以訂閱接收通知,也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼


上一篇
[影片教學] Nuxt 3 視覺化開發工具 Nuxt DevTools
下一篇
[影片教學] Nuxt 3 部署網站服務
系列文
Nuxt 3 快速入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言