title: 使用 nuxi dev 啟動 Nuxt 應用程式的詳細指南
date: 2024/9/2
updated: 2024/9/2
author: cmdragon
excerpt:
摘要：本文介紹了使用 nuxi dev 命令啟動 Nuxt 應用程式的方法，包括安裝 Nuxt.js、啟動開發伺服器及配置選項等詳細步驟。
categories:
- 前端開發
tags:
- Nuxt.js
- nuxi dev
- 開發伺服器
- Vue.js
- 前端開發
- 本地環境
- 應用啟動
掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長
Nuxt.js 是一個流行的 Vue.js 框架，讓我們能夠快速開發現代化的 Web 應用。nuxi dev 命令是 Nuxt 的開發伺服器，用於在本地環境中啟動應用，使我們能夠快速迭代和除錯程式碼。
安裝 Nuxt.js
首先，你需要確保已經在你的機器上安裝了 Node.js。你可以在終端中執行以下命令來檢查 Node.js 是否已安裝：
node -v
如果你還沒有安裝 Node.js，建議去 Node.js 官方網站 下載並安裝。
接下來，使用 npm 或 yarn 安裝 Nuxt.js。我們可以使用以下命令建立一個新的 Nuxt 應用：
npx nuxi@latest init my-nuxt-app
在這個過程中，系統會提示你選擇一些選項，比如選擇 CSS 框架、Linting 工具等。根據你的需求選擇即可。
啟動開發伺服器
安裝完 Nuxt 應用後，進入到你的專案目錄：
cd my-nuxt-app
現在，你可以使用 nuxi dev 命令來啟動開發伺服器。基礎命令如下：
npx nuxi dev
這將啟動一個開發伺服器，預設監聽在 http://localhost:3000。
命令選項
nuxi dev 命令有多個可選引數，以下是一些常用選項：
rootDir：要提供的應用程式的根目錄。預設值為當前目錄.。--dotenv：指向要載入的另一個.env檔案。--open, -o：啟動後自動在瀏覽器中開啟 URL。--port, -p：指定監聽的埠，預設 3000。--host, -h：指定伺服器的主機名，預設 localhost。--https：使用 https 協議監聽。
示例：啟動開發伺服器
假設我們想要將開發伺服器設定為在 4000 埠上執行，並在啟動後自動開啟瀏覽器。我們可以這樣執行命令：
npx nuxi dev -p 4000 -o
自簽名 HTTPS 證書
如果你想用 HTTPS 啟動開發伺服器，可以使用 --https 選項。但請注意，瀏覽器會對此進行警告，因為這是自簽名證書。為了在開發中使用自簽名證書，你需要設定環境變數：
export NODE_TLS_REJECT_UNAUTHORIZED=0
然後可以執行以下命令來啟動：
npx nuxi dev --https
訪問你的應用
無論使用什麼配置，啟動伺服器後你都可以在瀏覽器中訪問 http://localhost:3000 或指定的埠（如 http://localhost:4000）。你應該能看到 Nuxt 應用的歡迎頁面。
結論
透過上述步驟，你可以輕鬆啟動和配置一個 Nuxt.js 的開發伺服器。nuxi dev 命令提供了靈活的選項來滿足不同的開發需求。實驗並熟悉這些選項後，你將能更有效地開發和除錯你的應用。
餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 nuxi dev 啟動 Nuxt 應用程式的詳細指南 | cmdragon's Blog
往期文章歸檔：
- 使用 nuxi clean 命令清理 Nuxt 專案 | cmdragon's Blog
- 使用 nuxi build-module 命令構建 Nuxt 模組 | cmdragon's Blog
- 使用 nuxi build 命令構建你的 Nuxt 應用程式 | cmdragon's Blog
- 使用 nuxi analyze 命令分析 Nuxt 應用的生產包 | cmdragon's Blog
- 使用 nuxi add 快速建立 Nuxt 應用元件 | cmdragon's Blog
- 使用 updateAppConfig 更新 Nuxt 應用配置 | cmdragon's Blog
- 使用 Nuxt 的 showError 顯示全屏錯誤頁面 | cmdragon's Blog
- 使用 setResponseStatus 函式設定響應狀態碼 | cmdragon's Blog
- 如何在 Nuxt 中動態設定頁面佈局 | cmdragon's Blog
- 使用 reloadNuxtApp 強制重新整理 Nuxt 應用 | cmdragon's Blog
- 使用 refreshNuxtData 重新整理 Nuxt應用 中的資料 | cmdragon's Blog
- 使用 prerenderRoutes 進行預渲染路由 | cmdragon's Blog
- 使用 preloadRouteComponents 提升 Nuxt 應用的效能 | cmdragon's Blog
- 使用 preloadComponents 進行元件預載入 | cmdragon's Blog
- 使用 prefetchComponents 進行元件預取 | cmdragon's Blog
- 使用 onNuxtReady 進行非同步初始化 | cmdragon's Blog
- 使用 onBeforeRouteUpdate 組合式函式提升應用的使用者體驗 | cmdragon's Blog
- 使用 onBeforeRouteLeave 組合式函式提升應用的使用者體驗 | cmdragon's Blog
- 使用 navigateTo 實現靈活的路由導航 | cmdragon's Blog
- 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染 | cmdragon's Blog