title: 安裝 Nuxt.js 的步驟和注意事項
date: 2024/6/17
updated: 2024/6/17
author: cmdragon
excerpt:
Nuxt.js在Vue.js基礎上提供的伺服器端渲染框架優勢，包括提高開發效率、程式碼維護性和應用效能。指南詳細說明了從環境準備、Nuxt.js安裝配置到進階部署技巧，涵蓋錯誤解決、效能最佳化及Docker、CI/CD實踐，為開發者構建高效Web應用提供全面攻略。
categories:
- 前端開發
tags:
- Nuxt.js
- Vue.js
- SSR
- 伺服器端渲染
- 前端開發
- Web效能
- 程式碼部署
掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長
引言
在當今的 Web 開發領域，Vue.js 已經成為一門非常受歡迎的 JavaScript
框架，並被廣泛應用於各種場景。然而，隨著應用程式的複雜性不斷增加，開發人員需要更多的工具和支援來提高生產力和開發效率。這就是
Nuxt.js 的背景和意義所在。
Nuxt.js 是一個基於 Vue.js 的伺服器端渲染 (SSR) 框架，專門用於開發高效、高效能的 universial
應用程式。它提供了一系列的工具和約定，幫助開發人員快速構建複雜的應用程式，同時保證程式碼的可維護性和可擴充套件性。
Nuxt.js 的優勢在於：
- 約定優於配置：Nuxt.js 遵循了一系列的約定，使得開發人員可以更快地入門和上手，同時也保證了程式碼的一致性和可維護性。
- 自動化生成：Nuxt.js 可以自動生成頁面、路由和伺服器端渲染的程式碼，使得開發人員可以更加關注業務邏輯和頁面設計。
- 外掛和模組：Nuxt.js 提供了豐富的外掛和模組，可以幫助開發人員快速整合第三方庫和服務，如 Google
Analytics、ESLint、TypeScript 等。 - 效能最佳化：Nuxt.js 內建了多種效能最佳化技術，如程式碼分割、懶載入、預取資料等，可以幫助開發人員構建高效能的應用程式。
因此，選擇 Nuxt.js 進行開發可以帶來以下好處：
- 提高生產力和開發效率：Nuxt.js 提供了一系列的工具和約定，可以幫助開發人員快速構建複雜的應用程式。
- 保證程式碼的可維護性和可擴充套件性：Nuxt.js 遵循了一系列的約定，可以保證程式碼的一致性和可維護性。
- 構建高效能的應用程式：Nuxt.js 內建了多種效能最佳化技術，可以幫助開發人員構建高效能的應用程式。
環境準備
安裝 Node.js 和 npm
-
訪問 Node.js 官方網站：前往Node.js 官方網站。
-
下載適合您作業系統的版本：選擇適合您作業系統的Node.js版本進行下載。通常，您可以選擇 LTS（長期支援）版本，因為它更穩定。
-
執行安裝程式：下載完成後，執行安裝程式並按照提示進行安裝。
-
驗證安裝：安裝完成後，開啟命令列工具（如Windows的CMD或PowerShell，macOS或Linux的Terminal），輸入以下命令來驗證Node.js和npm是否已正確安裝：
node -v npm -v如果您看到版本號，則表示安裝成功。
配置 Node.js 版本管理工具（如 nvm）
-
訪問 nvm GitHub倉庫：前往nvm GitHub倉庫。
-
檢視安裝說明：根據您的作業系統，選擇相應的安裝說明。
-
按照說明安裝 nvm：按照GitHub倉庫中的說明進行安裝。例如，在macOS或Linux上，您可能需要執行以下命令：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash或者，如果您使用的是Windows，您可能需要下載安裝程式並執行它。
-
使用 nvm 安裝和管理 Node.js 版本：安裝nvm後，您可以使用以下命令來安裝和管理不同的Node.js版本：
nvm install <version> nvm use <version> nvm list例如，安裝Node.js v14.17.0並使用它：
nvm install 14.17.0 nvm use 14.17.0
安裝 Yarn 或其他包管理工具（可選）
-
訪問 Yarn 官方網站：前往Yarn 官方網站。
-
檢視安裝說明：根據您的作業系統，選擇相應的安裝說明。
-
按照說明安裝 Yarn：例如，在macOS或Linux上，您可能需要執行以下命令：
curl -o- -L https://yarnpkg.com/install.sh | bash或者，在Windows上，您可能需要下載安裝程式並執行它。
-
驗證安裝：安裝完成後，開啟命令列工具，輸入以下命令來驗證Yarn是否已正確安裝：
yarn --version如果您看到版本號，則表示安裝成功。
完成以上步驟後，您的開發環境就準備好了，可以開始使用Node.js和npm（或Yarn）進行專案開發了。
Nuxt.js 安裝
要安裝和設定 Nuxt.js 專案，請按照以下步驟操作：
-
開啟命令列工具：開啟命令列工具（如Windows的CMD或PowerShell，macOS或Linux的Terminal）。
-
建立新專案：使用以下命令建立一個新的 Nuxt.js 專案：
npx nuxi@latest init <project-name>將
<project-name>替換為您想要使用的專案名稱。 -
選擇專案模板和配置選項
：在安裝過程中，您將看到一個互動式的介面，提示您選擇專案模板和配置選項。根據您的需要進行選擇。AD: 3DES(Triple DES)加密解密 | 一個覆蓋廣泛主題工具的高效線上平臺 (cmdragon.cn) -
安裝專案依賴：安裝完成後，進入專案目錄，執行以下命令安裝專案依賴：
cd <project-name> npm install或者，如果您使用 Yarn，可以執行以下命令：
yarn install -
啟動開發伺服器：在專案目錄中，執行以下命令啟動開發伺服器：
npm run dev或者，如果您使用 Yarn，可以執行以下命令：
yarn dev您將看到類似以下內容：
Nuxt.js dev mode starting ... > <project-name>@0.0.0 dev <project-directory> > nuxt ℹ Nuxt.js v3.0.0-27526357.48669389 ℹ http://localhost:3000 ℹ Listening on: http://localhost:3000/ ℹ File watching enabled現在，您可以在瀏覽器中訪問http://localhost:3000來檢視您的 Nuxt.js 應用程式。
請注意，Nuxt.js
版本可能會更新，因此您可能需要調整命令或選項。請參考(安裝 · 快速入門 Nuxt)
獲取最新的安裝說明。
注意事項
在安裝和配置 Nuxt.js 專案時，以下是一些重要的注意事項：
- Node.js 版本：確保您的 Node.js 版本符合 Nuxt.js 的要求。您可以在 Nuxt.js 的官方文件中找到相容的 Node.js
版本。如果需要，您可以使用nvm（Node Version Manager）來安裝和切換不同的 Node.js 版本。 - npm 或 Yarn 版本：同樣，確保您的 npm 或 Yarn 版本與 Nuxt.js 相容。通常，Nuxt.js 官方文件會提供推薦的版本。
- 避免使用過時的 Nuxt.js 版本
：始終使用最新的穩定版本來確保您能夠獲得最新的功能和安全性更新。可以透過npx nuxi@latest init命令來建立專案，這將自動使用最新的
Nuxt.js 版本。 - 專案目錄結構：確保您的專案目錄結構清晰合理。Nuxt.js
有自己的目錄結構約定，例如pages、components、layouts、plugins、store和static等目錄。遵循這些約定可以幫助您更好地組織程式碼。 - 環境變數和 .env 檔案
：配置環境變數對於管理不同環境（開發、測試、生產）的配置非常有用。您可以在專案的根目錄下建立一個.env
檔案來儲存環境變數，並使用process.env.VARIABLE_NAME在您的程式碼中訪問它們。 - 使用 TypeScript：如果您喜歡靜態型別檢查，可以使用 TypeScript 進行開發。Nuxt.js 官方支援
TypeScript，並且可以很容易地整合到專案中。您可以透過新增 TypeScript 相關的依賴和配置檔案來啟用它。 - 版本控制：使用版本控制系統（如 Git）來管理您的程式碼。這將幫助您跟蹤更改、協作和部署。
- 閱讀文件：Nuxt.js 有一個詳盡的文件，涵蓋了從入門到高階的各個方面。在遇到問題時，首先查閱官方文件通常能夠找到解決方案。
- 社群和資源：加入 Nuxt.js 社群，如 GitHub、Discord 或 Stack Overflow，可以獲取幫助和資源。
- 測試和部署：確保您的應用程式經過充分的測試，並且瞭解如何將其部署到生產環境。Nuxt.js 提供了多種部署選項，包括靜態生成和伺服器端渲染。
專案配置
nuxt.config.ts 檔案
nuxt.config.ts是 Nuxt.js 專案的配置檔案，它是一個 TypeScript
檔案，用於設定專案的全域性配置。這個檔案包含了專案的基本設定，如構建選項、路由、靜態檔案管理、伺服器端渲染（SSR）等。以下是一些關鍵配置項：
- 構建選項：如
build物件，用於設定構建過程中的選項，如輸出目錄、壓縮、最佳化等。 - 路由配置：
router物件，定義了應用的路由結構，包括頁面、中介軟體、動態路由等。 - 外掛和模組：
plugins和modules陣列，用於引入外部外掛或模組，擴充套件 Nuxt.js 的功能。 - SSR（伺服器端渲染） ：
ssr或render選項，控制是否啟用伺服器端渲染，以及渲染策略。 - 靜態檔案：
export物件，配置靜態檔案的處理方式，如靜態路徑、預載入等。 - 頁面佈局：
layout屬性，定義全域性或特定頁面的佈局模板。
配置外掛、模組和中介軟體
- 外掛：
plugins陣列，新增全域性或區域性外掛，如 Vuex 外掛、axios 外掛等。 - 模組：
modules陣列，引入第三方 Nuxt.js 模組，如 Vuex Storefront、axios-ssr等。 - 中介軟體：在
router物件的middleware屬性中定義，用於在路由切換前後執行的函式。
自定義路由和頁面佈局
- 頁面：在
pages目錄下建立 Vue.js 檔案，Nuxt.js 會自動識別並處理這些檔案。 - 佈局：建立
.vue檔案作為佈局模板，然後在layout屬性中指定，可以自定義全域性或特定頁面的佈局。
配置靜態檔案和資源
- 靜態檔案：
export物件中的redirect和alias用於處理靜態檔案的重定向和別名，public目錄用於存放直接訪問的資源。 - 資原始檔：
assets物件用於管理專案中的資原始檔，如 CSS、JS、圖片等。
伺服器端渲染和靜態站點生成
- SSR：
ssr: true或render: 'server'用於啟用伺服器端渲染。這將允許在伺服器上生成完整的 HTML，提高SEO和首屏載入速度。 - SSG（靜態站點生成） ：
generate方法或export物件中的generate選項，用於在構建時生成靜態 HTML 頁面，適合靜態內容為主的網站。
在編寫nuxt.config.ts時，要確保配置的邏輯清晰，遵循 Nuxt.js 的最佳實踐，這樣可以確保專案配置的正確性和可維護性。
常見問題解決
解決安裝過程中的常見錯誤
- 依賴衝突：確保你的 Node.js 版本符合 Nuxt.js 的要求。Nuxt.js 通常需要 Node.js 12.x 或更高版本。使用
nvm或nvmw
管理不同版本的 Node.js。 - 網路問題：如果遇到網路問題，如無法從 npm 倉庫下載依賴，可以嘗試切換到國內的映象源，如淘寶 npm 映象。
- 許可權問題：在 Windows 上，可能需要以管理員身份執行命令列工具來安裝依賴。
- 環境變數：確保你的環境變數配置正確，尤其是
NODE_ENV和PATH。
解決開發過程中遇到的問題
- 熱過載問題：如果熱過載不工作，可以嘗試重啟開發伺服器，或者檢查
nuxt.config.ts中的配置。 - 路由問題：確保頁面檔名和路由配置正確對應。動態路由需要使用特定的命名約定。
- 模組和外掛問題：檢查模組和外掛的配置是否正確，確保它們在
nuxt.config.ts中被正確引入。 - 構建問題：如果構建失敗，檢查控制檯輸出，通常會有錯誤資訊指出問題所在。確保所有依賴都安裝正確，並且沒有語法錯誤。
提供除錯和效能最佳化的建議
-
除錯：
- 使用
console.log或 Vue.js 的console方法進行除錯。 - 利用 Chrome DevTools 或其他瀏覽器的開發者工具進行網路、效能分析。
- 使用 Nuxt.js 提供的
debug模式，透過設定debug: true在nuxt.config.ts中開啟。
- 使用
-
效能最佳化：
- 使用
asyncData或fetch方法進行資料預取，減少首屏載入時間。 - 利用 Nuxt.js 的
loading元件顯示載入狀態。 - 使用
webpack的splitChunks功能進行程式碼分割，減少初始載入體積。 - 壓縮靜態資源，如 CSS、JS 和圖片。
- 使用 CDN 加速靜態資源的載入。
- 最佳化伺服器配置，如使用更快的 Web 伺服器，如 Nginx 或 Node.js 的
cluster模組。
- 使用
在解決任何問題時，首先確保你的程式碼沒有錯誤，然後逐步檢查配置檔案、依賴和執行環境。如果問題仍然存在，可以查閱 Nuxt.js
的官方文件、社群論壇或 GitHub Issues 尋求幫助。
進階安裝
使用 nvm 管理多個 Node.js 版本
- 首先，你需要安裝
nvm。在 Linux 或 macOS 上，可以使用以下命令：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
- 安裝完成後，重新載入終端，然後使用以下命令安裝你需要的 Node.js 版本：
nvm install 14.18.0
- 切換到你需要的 Node.js 版本：
nvm use 14.18.0
- 在你的專案目錄中，使用以下命令初始化 Nuxt.js 專案：
npx create-nuxt-app my-project
- 現在，你可以使用
nvm在不同的 Node.js 版本之間切換，並且可以確保你的 Nuxt.js 專案在正確的 Node.js 版本上執行。
使用 Docker 容器化 Nuxt.js 專案
- 建立一個名為
Dockerfile的檔案，並在檔案中新增以下內容：
FROM node:14-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD [ "npm", "start" ]
- 構建 Docker 映象：
docker build -t my-nuxt-app .
- 執行 Docker 容器：
docker run -p 3000:3000 -d my-nuxt-app
- 現在，你可以透過
http://localhost:3000訪問你的 Nuxt.js 應用。
使用 CI/CD 工具自動化部署
- 選擇一個 CI/CD 工具，如 GitHub Actions、GitLab CI/CD 或 Travis CI。
- 在你的專案中建立一個配置檔案，如
.github/workflows/main.yml，並在檔案中新增以下內容：
name: Build and Deploy
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
run: |
echo "Deploying to production..."
# Add your deployment commands here
- 在你的 CI/CD 工具中配置部署命令，如將構建後的檔案推送到你的伺服器或使用 FTP 或 SSH 傳輸檔案。
- 現在，每當你推送到主分支時，你的 Nuxt.js 專案都會自動構建和部署。