Nuxt 3 项目搭建完整教程 | 支持 Node.js v24

概述

想用最新的 Nuxt 3 框架搭建高性能 Vue 应用，却卡在环境配置？本文将为你提供一份 完整、简洁、可落地 的 Nuxt 3 项目初始化教程，专为 Node.js v24 环境 优化。无需复杂配置，只需几步命令，即可启动一个支持 SSR、文件系统路由的现代化前端项目。无论你是 Vue 新手还是有经验的开发者，都能快速上手并投入开发。

1、初始化项目

以一个空目录作为前端项目目录（例如 D:\yly_nav\front），执行命令自动创建 package.json 文件：

npm init -y

你会看到类似输出，并生成 package.json，如图

然后 修改 package.json 的 scripts 部分，如下所示：

{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "start": "node .output/server/index.mjs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

🔔 注意：

必须添加 "type": "module"（Nuxt 3 使用 ESM）

启动命令是 nuxt dev（不是 nuxt）

start 脚本用于运行构建后的生产版本

2、安装 Nuxt 3

在项目根目录执行以下命令，安装 Nuxt 3 最新稳定版：

npm install nuxt@latest

如图

✅ 这会自动安装兼容 Node.js v24 的最新 Nuxt 3（如 v3.15.x 或更高）
❌ 不要指定旧版本（如 nuxt@3.0.0），除非有特殊需求

3、创建配置和页面

(1) 创建 Nuxt 3 配置文件：`nuxt.config.ts`（或 `.js`）

在项目根目录下创建文件 nuxt.config.ts（推荐用 TS，也可用 .js）：

import { defineNuxtConfig } from "nuxt/config";

// nuxt.config.ts
export default defineNuxtConfig({
  // SSR 默认开启（无需显式写 ssr: true）
  ssr: true,

  // 路由模式默认就是 history 模式，无需额外配置
  // router: { mode: 'history' } ← Nuxt 3 已移除此选项

  // 构建相关配置（可选）
  build: {
    // 一般不需要写，按需扩展
  },

  // 开发服务器端口（可选，默认 3000）
  devServer: {
    port: 3000
  }
})

📝 说明：

Nuxt 3 使用 defineNuxtConfig 辅助函数

router.mode 在 Nuxt 3 中已废弃（始终使用 HTML5 History 模式）

SSR 默认开启，如需关闭可设 ssr: false

(2) 创建 `pages/` 目录并添加首页

然后在 pages/ 下创建 index.vue

代码如下

<!-- pages/index.vue -->
<template>
  <div>
    <h1>欢迎使用 Nuxt 3</h1>
    <p>基于 pages/ 的文件路由已成功启用！</p>
  </div>
</template>

<script setup>
// Nuxt 3 推荐使用 <script setup>（组合式 API）
</script>

如图

✅ 只要存在 pages/ 目录，Nuxt 3 就会自动启用 文件系统路由，无需额外配置！

4、启动项目

在项目根目录运行：

npm run dev

如图可以看到启动于了本地3000端口，浏览器访问即可

结果如下图

✅ 大功告成！

后续添加新页面？只需在 pages/ 下新建 .vue 文件，例如：

pages/about.vue → 访问 /about

pages/user/[id].vue → 动态路由 /user/123

结语

至此，你的 Nuxt 3 项目已成功运行！是不是比想象中更简单？

如果你在搭建过程中遇到任何问题，或希望获取更多免费源码、实战项目、建站模板与前沿技术教程，欢迎加入我们的交流群咨询交流——幽络源官方 QQ 技术交流群：307531422

THE END

技术教程

Nuxt 3 项目搭建完整教程 | 支持 Node.js v24 | 幽络源免费技术分享

概述