Nuxt.js 封装 Vue2 SSR 复杂流程，开箱即用：通过约定式目录（pages、layouts、store 等）自动处理路由、数据预取、状态同步与 SEO；推荐用 create-nuxt-app 初始化，支持服务端渲染与静态生成。
直接用 Vue2 做服务端渲染（SSR）需要手动配置 webpack、Vue Server Renderer、路由同步、状态管理等，门槛高、易出错。Nuxt.js 就是为解决这个问题而生——它把 Vue2 + SSR 的复杂流程封装成约定式开发，开箱即用。
核心思路很简单：你只管写页面和组件，Nuxt 自动帮你完成服务端渲染的整套逻辑，包括 HTML 生成、数据预取、路由匹配、状态同步、SEO 优化等。
项目初始化
推荐使用官方脚手架创建 Vue2 + Nuxt2 项目：
npx create-nuxt-app my-ssr-app
安装过程中会提示选择：
立即学习“前端免费学习笔记（深入）”；
- 包管理器（npm 或 yarn）
- UI 框架（可选 none）
- 服务端框架（如 Express、Koa，或默认内置 server）
- 是否启用 PWA、Axios、TypeScript 等模块
创建完成后，执行：
cd my-ssr-app npm run dev
默认访问 http://localhost:3000，即可看到已启用 SSR 的 Vue2 应用。
注意：Nuxt2 默认基于 Vue2 和 Vuex（非 Pinia），若需兼容旧项目，确保不混用 Vue3 语法。
关键目录与约定规则
Nuxt 靠目录结构驱动功能，无需手动写 router.js 或 entry 文件：
pages/
每个.vue文件自动生成对应路由，支持动态路由（如pages/users/_id.vue→/users/123）和嵌套路由（通过children或index.vue+other.vue组合）。layouts/
default.vue是默认布局，其中<nuxt/>是页面内容占位符（类似<router-view>）。可新增error.vue自定义错误页。components/
存放复用型组件（如<Header />、<Card />），不参与路由，也不被 Nuxt 特殊处理。-
plugins/
用于注册全局插件（如 axios、moment、第三方 UI 库）。需在nuxt.config.js中声明：plugins: [ { src: '~/plugins/axios', ssr: true }, // ssr: true 表示服务端也加载 ] middleware/
放置路由守卫逻辑，例如权限校验、国际化跳转。支持全局（在nuxt.config.js注册）或页面级（在页面组件中middleware: 'auth'）。-
store/
使用 Vuex，支持nuxtServerInit方法——这是服务端数据注入的关键钩子，仅在服务端运行一次，可用于初始化用户信息、菜单等：// store/index.js actions: { nuxtServerInit({ commit }, { req }) { if (req.session && req.session.user) { commit('SET_USER', req.session.user) } } }
服务端数据获取
Nuxt 提供两个标准方法，在页面组件中预取数据：
-
asyncData()（仅页面组件）
在服务端和客户端都会执行，返回的数据会自动合并到组件data中。支持 Promise 或 async/await：export default { async asyncData({ $axios, params }) { const post = await $axios.$get(`/api/posts/${params.id}`) return { post } } } fetch()（Vue2 + Nuxt2.12+ 支持）
不影响data，但会触发$fetchState.pending等状态，适合用于非响应式数据加载。
⚠️ 注意：
asyncData中无法访问this，所有上下文通过参数对象传入（如context.app,context.store,context.route）。
SEO 与元信息配置
每个页面可单独设置 <head> 内容：
<template>
<div>{{ post.title }}</div>
</template>
<script>
export default {
async asyncData({ $axios, params }) {
const post = await $axios.$get(`/api/posts/${params.id}`)
return { post }
},
head() {
return {
title: this.post.title,
meta: [
{ hid: 'description', name: 'description', content: this.post.excerpt }
]
}
}
}
</script>hid 是防止重复插入的关键字段；也可在 nuxt.config.js 中统一配置全局 meta。
构建与部署
开发完成后：
npm run build # 生成服务端 bundle 和客户端资源 npm start # 启动 Node.js 服务（需 `mode: 'universal'`）
生产环境依赖 Node.js 服务器（如 Express），Nuxt 内置了轻量 server，也可集成到已有后端（如 Koa、NestJS）。
若想生成纯静态站点（SSG），运行：
npm run generate
输出在 dist/ 目录，可直接托管到 Nginx、CDN 或 GitHub Pages。
不复杂但容易忽略
