EP51 - 生產部署

更新於 發佈於 閱讀時間約 4 分鐘
Production Deployment 接下來的四篇文章內容是關於最佳實踐的內容
意思就是相當實用一定要練習摟!
快來看看生產部署吧~

開發環境 vs. 生產環境 - Development vs. Production​

在開發階段,Vue 提供了多項功能來提升開發體驗:

然而,這些功能在生產環境中並無實際用途,一些警告檢查還會帶來少量的效能負擔。因此,在部署至生產環境時,我們應該去除所有不必要、僅用於開發的代碼分支,以減少檔案大小並提升效能。

不使用建構工具 - Without Build Tools​

如果您在未使用建構工具的情況下透過 CDN 或自我託管腳本載入 Vue,請確保在部署到生產環境時使用生產版(以 .prod.js 結尾的 dist 文件)。生產版已預先壓縮,並去除了所有僅供開發用的代碼分支。

  • 如果使用全域建構(透過 Vue 全域變數存取):請使用 vue.global.prod.js
  • 如果使用 ESM 建構(透過原生 ESM 匯入存取):請使用 vue.esm-browser.prod.js

請參考 dist 文件指南以獲取更多詳情。

使用建構工具 - With Build Tools​

透過 create-vue(基於 Vite)或 Vue CLI(基於 webpack)搭建的專案已預先配置為生產版建構。

如果您使用自訂設置,請確保:

  • vue 解析為 vue.runtime.esm-bundler.js
  • 編譯時的功能標誌已正確配置。
  • process.env.NODE_ENV 在建構過程中被替換為 "production"。

其他參考資料:

追蹤執行時錯誤 - Tracking Runtime Errors​

應用層級的錯誤處理器可用於將錯誤報告至追蹤服務:

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
// 將錯誤報告至追蹤服務
}

像是 SentryBugsnag 等服務也提供 Vue 的官方整合方案。

這篇介紹蠻簡短的~
應該還是用Vite比較方便吧~

如果是 Vue 的建構方式,以 Vite 來進行構建是目前最方便且高效的選擇,原因如下:

  1. 快速開發體驗:Vite 針對開發模式進行了優化,啟動速度快,且支援熱更新(HMR),在專案開發時能夠極大提升效率。
  2. 內建 Production 配置:使用 Vite 建構的專案會自動配置為適合 production 環境的優化,包含代碼分割、資源壓縮及移除開發用代碼等,免去手動設定的麻煩。
  3. 輕量且靈活:Vite 預設支援 Vue,但也可以輕鬆整合其他前端工具或插件,適合不同需求的專案。
  4. 文件齊全,持續更新:Vite 是由 Vue 的作者尤雨溪推出的,因此與 Vue 的整合相當完善,且官方文件和社群支援非常豐富。
avatar-img
2會員
71內容數
分享生活趣事~
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
卡關的人生 的其他內容
Server-Side Rendering (SSR) 是將 Vue.js 組件在伺服器上渲染為 HTML 字串,並直接發送到瀏覽器的一種技術。這樣可以提升頁面顯示速度,尤其在網速慢或設備性能差的情況下。SSR 應用的代碼可在伺服器和客戶端上共享,提高開發效率。
測試對於構建複雜的 Vue 應用至關重要,因為它能防止回歸並鼓勵將應用拆分為可測試的模組。我們介紹了測試的基本術語和推薦的工具,包括單元測試、組件測試和端對端測試。建議越早開始測試,避免隨著時間推移而增加的相依性。單元測試專注於函數和邏輯的正確性,而組件測試則驗證 UI 元素的行為與交互。
狀態管理在 Vue 應用中非常重要,尤其是當多個組件需要共享狀態時。每個 Vue 組件管理自己的響應式狀態,但隨著組件數量增加,簡單的管理方式可能變得複雜。這時,可以使用如 Pinia 的狀態管理庫來簡化這一過程。Pinia 提供了一個更簡單的 API 和更強的類型推斷,並由 Vue 核心團隊維護。
前後端路由的協作是現代應用開發的重要部分。後端路由根據用戶的 URL 發送相應的回應,而前端路由則使得單頁應用(SPA)能在不重新加載整個頁面的情況下更新內容。前端路由會攔截用戶的導航,並動態加載所需的組件。
Vite 作為輕量快速的建置工具,原生支持 Vue SFC,並且提供簡化的配置與優越的開發體驗。文章還介紹了 IDE 支援、測試工具(如 Cypress 和 Vitest)、Linting 和格式化工具的使用,幫助開發者提高開發效率與代碼質量。
Vue 單文件元件(SFC)是 *.vue 文件,將模板、邏輯和樣式封裝在一個文件中,提供模組化開發。SFC 需建置步驟,但帶來多項好處,如元件範圍內的 CSS、預編譯模板和熱模塊替換(HMR)。適合單頁應用、靜態網站生成等前端專案。
Server-Side Rendering (SSR) 是將 Vue.js 組件在伺服器上渲染為 HTML 字串,並直接發送到瀏覽器的一種技術。這樣可以提升頁面顯示速度,尤其在網速慢或設備性能差的情況下。SSR 應用的代碼可在伺服器和客戶端上共享,提高開發效率。
測試對於構建複雜的 Vue 應用至關重要,因為它能防止回歸並鼓勵將應用拆分為可測試的模組。我們介紹了測試的基本術語和推薦的工具,包括單元測試、組件測試和端對端測試。建議越早開始測試,避免隨著時間推移而增加的相依性。單元測試專注於函數和邏輯的正確性,而組件測試則驗證 UI 元素的行為與交互。
狀態管理在 Vue 應用中非常重要,尤其是當多個組件需要共享狀態時。每個 Vue 組件管理自己的響應式狀態,但隨著組件數量增加,簡單的管理方式可能變得複雜。這時,可以使用如 Pinia 的狀態管理庫來簡化這一過程。Pinia 提供了一個更簡單的 API 和更強的類型推斷,並由 Vue 核心團隊維護。
前後端路由的協作是現代應用開發的重要部分。後端路由根據用戶的 URL 發送相應的回應,而前端路由則使得單頁應用(SPA)能在不重新加載整個頁面的情況下更新內容。前端路由會攔截用戶的導航,並動態加載所需的組件。
Vite 作為輕量快速的建置工具,原生支持 Vue SFC,並且提供簡化的配置與優越的開發體驗。文章還介紹了 IDE 支援、測試工具(如 Cypress 和 Vitest)、Linting 和格式化工具的使用,幫助開發者提高開發效率與代碼質量。
Vue 單文件元件(SFC)是 *.vue 文件,將模板、邏輯和樣式封裝在一個文件中,提供模組化開發。SFC 需建置步驟,但帶來多項好處,如元件範圍內的 CSS、預編譯模板和熱模塊替換(HMR)。適合單頁應用、靜態網站生成等前端專案。
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
呢排搞件PVE,寫返篇自己的技術筆記先。 PVE,Proxmox Pro,Proxmox Virtual Environment,呢個係Sales 用的名詞,分分鐘係啲0codeSales 0codePM隨口出來比Upsell 個客用,其實當你覺得DevOps同Programmer係唔同(而人
※ 工廠模式 定義: 工廠模式是一種實現了「工廠」概念的物件導向設計模式。它提供一個通用的工廠介面,將創建instance(實例)的程式碼交由子類別各自實現,並根據需求去動態地生成相應的物件。這種模式將物件的創建邏輯與使用邏輯分開,使程式碼更容易維護和擴展。 特點: 具有高度標準化和同質性的
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
這是為了搭建自己想要的工作流而開始的研究工作。
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
呢排搞件PVE,寫返篇自己的技術筆記先。 PVE,Proxmox Pro,Proxmox Virtual Environment,呢個係Sales 用的名詞,分分鐘係啲0codeSales 0codePM隨口出來比Upsell 個客用,其實當你覺得DevOps同Programmer係唔同(而人
※ 工廠模式 定義: 工廠模式是一種實現了「工廠」概念的物件導向設計模式。它提供一個通用的工廠介面,將創建instance(實例)的程式碼交由子類別各自實現,並根據需求去動態地生成相應的物件。這種模式將物件的創建邏輯與使用邏輯分開,使程式碼更容易維護和擴展。 特點: 具有高度標準化和同質性的
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
這是為了搭建自己想要的工作流而開始的研究工作。