這篇打算介紹 Nuxt 可運行模式與解決情境
其中兩種靠調整設定，決定是否需要 Node Server

• Universal
• SPA

以及單純靜態頁

• 靜態頁產生 (Static Generated)

加以說明 Nuxt 三種基本用法
補充 03. Nuxt.js 怎麼處理 SSR 問題？擔任什麼角色？

懶人包提供哪些命令？

Nuxt 專案產生器預設產生四個 npm 命令

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

除起動開發模式外

$ nuxt (npm run dev)

這命令叫 Nuxt 啟動開發模式，連帶叫 Webpack 起床編譯，並且把程式碼編為 前端執行 和 後端執行 兩部分

那實際上線怎麼跑？

Nuxt 上線前準備

Nuxt 為了做 SSR 得有個後端監聽

同樣先讓 Webpack 編譯原始碼，但做足上線前準備(包含 minify 等雜事)

編完仍是分 前端執行 和 後端執行 的 js，得有個後端才能監聽請求，

Nuxt 便以 後端執行 js 運行 Node HTTP Server，負責 SSR。

想當然爾，Node Server 實際上線時跑 Production 模式

簡化上述，Nuxt 做兩件事

1. 以上線為前提編譯原始碼，編成 前端執行、後端執行 兩部分 js
2. 運行後端 js，提供簡易 Node HTTP Server

命令分別對應到兩件事

1. nuxt build (npm run build)
2. nuxt start (npm run start)

架構選擇，哪個模式？

雖然我們裝 Nuxt 主要為處理 SSR，但框架本身也提供開關 - mode
nuxt.config.js mode 設成 'universal'，代表網站需要 SSR

對應步驟

1. nuxt.config.js 設 mode: 'universal'
2. npm run build
3. npm run start

不需要就關掉，只留 CSR，Webpack 打包就會簡化 後端執行 js，把 Nuxt 當成一台 Node Server 提供 SPA 網站服務

1. nuxt.config.js 設 mode: 'spa'
2. npm run build
3. Nuxt 編譯完自動執行 nuxt generate，透過 Nuxt 產生 Vue.js SPA，預設放在 dist

前文 nuxt.config.js 解釋過設定差異

其他選擇？

Nuxt 負責把原始碼轉為 HTML，再吐給 Browser
「預先轉好」不成問題，即 靜態頁產生(Static Generated)、或 預先渲染(Pre Rendering)

對應命令是:

$ nuxt generate (npm run generate)

執行後依各靜態路由轉為一張張靜態頁面，類似 prepos、fireapp，一個頁面檔案編成一頁。動態路由則是依你設定，例如

/product/:id 指定預先渲染 id 1 ~ 10，動態路由將會產生對應的 10 頁靜態頁。

靜態頁產生成果預設放在專案目錄 dist 下

備註

Nuxt 命令不只這些，建議讀者試著執行 nuxt --help

指定新的nuxt設定檔路徑、改運行模式和預設網址 https://localhost:3000 都一行搞定

這部分官方文件 有提及，附上供讀者參考