Vue 服务端渲染：Nuxt.js 基础

Nuxt.js 是一个基于 Vue.js 的通用应用框架，预设了利用 Vue.js 开发服务端渲染（SSR）应用所需的各种配置。它主要用于解决单页应用（SPA）在 SEO（搜索引擎优化）和首屏加载速度方面的痛点。通过对客户端/服务端基础架构的抽象，Nuxt.js 关注于应用的 UI 渲染，提供了自动代码分层、路由生成、异步数据加载等核心功能。

理解服务端渲染（SSR）与渲染模式

SSR（Server-Side Rendering）是指在服务器端将 Vue 组件直接渲染成 HTML 字符串，再将完整的 HTML 发送给浏览器。这种方式使得搜索引擎爬虫能够直接抓取页面内容，同时也加快了首屏显示速度。

Nuxt.js 支持多种渲染模式，通过 nuxt.config.js 文件进行配置：

通用模式（SSR）：默认模式。服务器在每次请求时渲染页面，适合需要 SEO 的动态网站。
静态生成（Static Generated）：使用 nuxt generate 命令，在构建时生成静态 HTML 文件。适合内容固定的展示型网站，无需服务器实时渲染。
单页应用（SPA）：将 ssr 设置为 false。仅在客户端渲染，适合对 SEO 无要求但交互性极强的后台管理系统。

在 nuxt.config.js 中切换模式：

export default {
  ssr: true // 开启服务端渲染，设为 false 则为纯客户端渲染
}

项目搭建与环境准备

使用官方脚手架工具可以快速初始化项目，无需手动配置 Webpack 或 Babel。

确保已安装 Node.js 环境。
执行以下命令创建新项目（使用 Yarn）：
```
yarn create nuxt-app <project-name>
```
若使用 NPM，则运行：
```
npx create-nuxt-app <project-name>
```
进入项目目录：
```
cd <project-name>
```
启动开发服务器：
```
yarn dev
```
访问 http://localhost:3000 查看运行效果。

路由系统：基于文件结构的自动生成

Nuxt.js 会根据 pages 目录下的文件结构自动生成 vue-router 配置，无需手动编写路由映射。

基础路由

假设文件结构如下：

pages/
--| index.vue
--| user/
-----| index.vue
-----| one.vue

Nuxt.js 自动生成的路由配置如下：

路由路径	文件位置	组件名称
`/`	`pages/index.vue`	`index`
`/user`	`pages/user/index.vue`	`user`
`/user/one`	`pages/user/one.vue`	`user-one`

动态路由

若需要带参数的动态路由（如 /user/1），创建以下划线 _ 作为前缀的文件或目录。

文件：pages/user/_id.vue
路由：/user/:id
访问：/user/123

在组件内可以通过 this.$route.params.id` 或 `asyncData` 的 `params` 参数获取 ID。 ### 路由跳转与传参在页面间进行导航时，**使用** `<nuxt-link>` 组件替代 `<a>` 标签，以避免页面整体刷新。 * **基础跳转**： ```vue <template> <nuxt-link to="/">首页</nuxt-link> </template> ``` * **带参数跳转**： ```vue <template> <nuxt-link :to="{ name: 'user-id', params: { id: '1' } }">用户详情</nuxt-link> </template> ``` --- ## 数据获取与生命周期在服务端渲染中，数据获取必须在页面渲染前完成。Nuxt.js 提供了 `asyncData` 和 `fetch` 两个核心钩子。 ### asyncData 方法 `asyncData` 仅限于**页面组件**（`pages` 目录下的组件）使用。它会在组件（限于页面组件）每次加载之前被调用，可以异步获取数据并返回给组件的 `data`。 * **特点**：服务端渲染时在服务器运行，客户端路由跳转时在客户端运行。 * **注意**：无法通过 `this` 访问组件实例（因为此时组件还未创建）。 ```javascript export default { async asyncData({ params, error }) { try { const { data } = await axios.get(`https://api.example.com/users/${params.id})
return { user: data } // 返回的数据会与组件 data 合并
} catch (e) {
error({ statusCode: 404, message: 'User not found' })
}
}
}


### fetch 方法

`fetch` 用于在渲染页面前**填充应用的状态树（store）**。它可以在页面组件、布局组件甚至普通组件中使用。

```javascript
export default {
  async fetch({ store, params }) {
    await store.dispatch('users/getUser', params.id)
  }
}

请求处理生命周期流程

理解 Nuxt.js 的生命周期对于调试中间件和数据预取至关重要。以下是请求进入 Nuxt 应用后的处理流程：

graph TD A["Incoming Request"] --> B{nuxtServerInit?} B -- Yes --> C["Store Initialization"] B -- No --> D["Global Middleware"] C --> D D --> E["Layout Middleware"] E --> F["Page Middleware"] F --> G{Validate?} G -- Yes --> H["Validate Parameters"] G -- No --> I["asyncData / Fetch"] H -- Valid --> I H -- Invalid --> J["Render 404 Page"] I --> K["Render Page Component"] K --> L["Generate HTML"]

关键生命周期说明

nuxtServerInit：Store 的初始化钩子，仅在服务端执行一次。常用于从请求头（如 Cookie）中获取 Token 并存储到 Vuex 中。
Middleware（中间件）：类似于路由守卫，可分为全局中间件（配置在 nuxt.config.js）、布局中间件和页面中间件。用于权限校验或重定向。
Validate：在校验动态路由参数时使用。若返回 false，Nuxt 将自动加载 404 错误页面。

export default {
  validate({ params }) {
    // 校验参数是否为数字
    return /^\d+$/.test(params.id)
  }
}
```

---

## 视图与布局管理

Nuxt.js 提供了自定义布局的功能，允许在不同页面间复用通用的结构（如头部、侧边栏、页脚）。

1.  **创建**布局文件：在 `layouts` 目录下创建 `.vue` 文件（例如 `layouts/blog.vue`）。
2.  **添加** `<nuxt />` 组件：该组件决定了页面主体内容渲染的位置。

```vue
<template>
  <div>
    <header>我的博客头部</header>
    <nuxt /> <!-- 页面内容将渲染在此处 -->
    <footer>版权信息</footer>
  </div>
</template>
```

3.  **指定**页面布局：在页面组件中通过 `layout` 属性引用。

```javascript
export default {
  layout: 'blog'
}
```

4.  **自定义**错误页面：在 `layouts` 目录下创建 `error.vue`，可以自定义 404 或 500 错误页面的展示样式。该组件接收一个 `error` 对象作为 prop。

---

## 项目构建与部署

当开发完成后，需要将项目打包并部署到生产环境。

### 构建步骤

1.  **执行**构建命令：

    ```bash
    npm run build
    ```

    此命令会生成 `.nuxt` 目录，包含编译后的服务端代码和客户端资源。

2.  **准备**部署文件：将以下文件和文件夹上传至服务器：
    *   `.nuxt` （生成的构建目录）
    *   `package.json` （依赖配置）
    *   `package-lock.json` （依赖版本锁定）
    *   `nuxt.config.js` （应用配置）
    *   `static` （静态资源，不经过 Webpack 处理）

### 服务器部署配置

1.  **安装**依赖：在服务器目录下运行 `npm install`。
2.  **启动**服务：运行 `npm run start` 启动 Nuxt 服务（默认监听 3000 端口）。
3.  **配置**反向代理（以 Nginx 为例）：为了让用户通过 80 端口访问，需配置 Nginx 将请求代理给 Nuxt 进程。

    打开 `nginx.conf`，修改 `server` 块：

    ```nginx
    server {
        listen 80;
        server_name your-domain.com;

        location / {
            proxy_pass http://127.0.0.1:3000; # 代理至本地 Nuxt 服务
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $remote_addr;
        }
    }

使用 PM2 守护进程：为了防止 Nuxt 进程意外退出，建议使用 PM2 进行管理。
```
# 安装 PM2
npm install -g pm2

# 启动进程
pm2 start npm --name "my-nuxt-app" -- run start
```

文章目录

Vue 服务端渲染：Nuxt.js 基础

Vue 服务端渲染：Nuxt.js 基础

理解服务端渲染（SSR）与渲染模式

项目搭建与环境准备

路由系统：基于文件结构的自动生成

基础路由

动态路由

请求处理生命周期流程

关键生命周期说明

评论 (0)

文章目录

Vue 服务端渲染：Nuxt.js 基础

Vue 服务端渲染：Nuxt.js 基础

理解服务端渲染（SSR）与渲染模式

项目搭建与环境准备

路由系统：基于文件结构的自动生成

基础路由

动态路由

请求处理生命周期流程

关键生命周期说明

评论 (0)

扫一扫，手机查看