NuxtJs-服务端渲染SSR

最新推荐文章于 2024-08-10 18:26:28 发布

蒙面价肥猫

最新推荐文章于 2024-08-10 18:26:28 发布

阅读量218

点赞数

分类专栏： Vue3 文章标签： vue.js javascript 前端

原文链接：https://www.nuxtjs.cn/

版权

Vue3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

NuxtJs-服务端渲染SSR

文章目录

NuxtJs-服务端渲染SSR

前言

NuxtJs官网讲的很详细，所以当一次知识搬运工。

1.为什么选择NuxtJs

模块化
高性能
友好
vue的seo优化(服务端渲染)
生成静态站点

2.安装

NuxtJs十分简单易用。一个简单的项目只需将nuxt添加为依赖组件即可。

2.1运行create-nuxt-app

确保安装了npx(npx 在 NPM 版本 5.2.0 默认安装了)

npx create-nuxt-app <项目名>

或者用yarn:

yarn create nuxt-app <项目名>

它会让你进行一些选择:

在集成的服务器端框架之间进行选择:

None (Nuxt 默认服务器)
Express
Koa
Hapi
Feathers
Micro
Fastify
Adonis (WIP)

选择您喜欢的 UI 框架:

选择您喜欢的测试框架:

None (随意添加一个)
Jest
AVA

选择你想要的 Nuxt 模式 (Universal or SPA)
添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
添加 EsLint 以在保存时代码规范和错误检查您的代码。
添加 Prettier 以在保存时格式化/美化您的代码。

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

npm run dev

应用现在运行在 http://localhost:3000 上运行。

2.2从头开始新建项目

如果不使用 Nuxt.js 提供的 starter 模板，我们也可以从头开始新建一个 Nuxt.js 应用项目，过程非常简单，只需要 1 个文件和 1 个目录。如下所示：

mkdir <项目名>
cd <项目名>

//初始化
npm init -y
//下载nuxt
npm i nuxt

在根目录下添加pages文件夹
1. 创建index.vue文件(首页)
```
<template>
  <h1>Hello world!</h1>
</template>
```
更改package.json文件夹内容（在script中添加dev）
```
{
  "name": "my-app",
  "scripts": {
      //添加如下代码
    "dev": "nuxt"
  }
}
```
上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。

3.目录结构

**资源目录：**资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
组件目录：components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
布局目录：布局目录 layouts 用于组织应用的布局组件。(若无额外配置，该目录不能被重命名。)
中间件目录：middleware 目录用于存放应用的中间件。
页面目录：pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。(若无额外配置，该目录不能被重命名。)
插件目录：插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
静态文件目录：static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。举个例子: /static/robots.txt 映射至 /robots.txt
store目录：store 目录用于组织应用的 Vuex 状态树文件。 Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
nuxt.config.js文件：文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
package.json 文件:package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

4.nuxt.config.js配置文件

Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置。

build

Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。
css

该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。
dev

该配置项用于定义应用客户端和服务端的环境变量。
generate

该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。
head

该配置项用于配置应用默认的 meta 标签。
loading

该配置项用于个性化定制 Nuxt.js 使用的加载组件。
modules

该配置项允许您将 Nuxt 模块添加到项目中。
modulesDir

该配置项允许您定义Nuxt.js应用程序的node_modules文件夹。
plugins

该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
rootDir

该配置项用于配置 Nuxt.js 应用的根目录。
router

此选项允许您配置 Nuxt.js 应用程序的服务器实例变量。
srcDir

该配置项用于配置应用的源码目录路径。
dir

此选项允许您配置 Nuxt.js 应用程序的自定义目录。
transition

该配置项用于个性化配置应用过渡效果属性的默认值。

5.路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间使用路由，我们建议使用[``](https://www.nuxtjs.cn/api/components-nuxt-link) 标签。

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

5.1基础路由

假设pages的目录结构如下：

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

nuxtJs自动生成的路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

5.2动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。

例如：

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

nuxtjs生成对应的路由配置表为：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件

5.3嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

重要的事情说三遍，可别忘了！！！

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

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

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

5.4动态嵌套路由

这个应用场景比较少见，但是 Nuxt.js 仍然支持：在动态路由下配置动态子路由。

假设文件结构如下：

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

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

router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      component: 'pages/_category.vue',
      children: [
        {
          path: '',
          component: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          component: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              component: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              component: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}

5.5命令视图

要渲染命名视图，您可以在布局(layout) / 页面(page)中使用 <nuxt name="top"/> 或 <nuxt-child name="top"/> 组件。要指定页面的命名视图，我们需要在nuxt.config.js文件中扩展路由器配置：

export default {
  router: {
    extendRoutes(routes, resolve) {
      const index = routes.findIndex(route => route.name === 'main')
      routes[index] = {
        ...routes[index],
        components: {
          default: routes[index].component,
          top: resolve(__dirname, 'components/mainTop.vue')
        },
        chunkNames: {
          top: 'components/mainTop'
        }
      }
    }
  }
}

它需要使用两个属性 components 和 chunkNames 扩展路由。此配置示例中的命名视图名称为 top 。

5.6过度动效

Nuxt.js 使用 Vue.js 的transition组件来实现路由切换时的过渡动效。

全局过渡动效设置

**提示 😗*Nuxt.js 默认使用的过渡效果名称为 page

如果想让每一个页面的切换都有淡出 (fade) 效果，我们需要创建一个所有路由共用的 CSS 文件。所以我们可以在 assets/ 目录下创建这个文件：

在全局样式文件 assets/main.css 里添加一下样式：
```
.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}
```
然后添加到 nuxt.config.js 文件中：
```
module.exports = {
  css: ['assets/main.css']
}
```
页面过渡动效设置

如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：

在全局样式 assets/main.css 中添加一下内容：
```
.test-enter-active,
.test-leave-active {
  transition: opacity 0.5s;
}
.test-enter,
.test-leave-active {
  opacity: 0;
}
```
然后我们将页面组件中的 transition 属性的值设置为 test 即可：
```
export default {
  transition: 'test'
}
```

5.7中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称 (middleware/auth.js将成为 auth 中间件)。

一个中间件接收 context 作为第一个参数：

export default function (context) {
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

中间件执行流程顺序：

nuxt.config.js
匹配布局
匹配页面

中间件可以异步执行，只需要返回一个Promise或使用第2个callback作为第一个参数：

middleware/stats.js
```
import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}
```
然后在你的 nuxt.config.js 、 layouts 或者 pages 中使用中间件:

nuxt.config.js
```
module.exports = {
  router: {
    middleware: 'stats'
  }
}
```
现在，stats 中间件将在每个路由改变时被调用。

您也可以将 middleware 添加到指定的布局或者页面:

pages/index.vue或者layouts/default.vue
```
export default {
  middleware: 'stats'
}
```

6.视图

本章节的内容阐述了如何在 Nuxt.js 应用中为指定的路由配置数据和视图，包括应用模板、页面、布局和 HTML 头部等内容。

在这里插入图片描述

6.1 模版

你可以定制化 Nuxt.js 默认的应用模板。

定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件。

默认模板为：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

6.2.布局

Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局。

6.2.1 默认布局

可通过添加 layouts/default.vue 文件来扩展应用的默认布局。

提示: 别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容。

<template>
  <nuxt />
</template>

6.2.2自定义布局

layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。

假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt />
  </div>
</template>

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>

6.3页面

页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项（对应 Nuxt.js 提供的功能特性）以便你能快速开发通用应用。

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
  export default {
    asyncData (context) {
      // called every time before loading the component
      return { name: 'World' }
    },
    fetch () {
      // The fetch method is used to fill the store before rendering the page
    },
    head () {
      // Set Meta Tags for this Page
    },
    // and more functionality to discover
    ...
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

Nuxt.js 为页面提供的特殊配置项：

属性名	描述
asyncData	最重要的一个键, 支持异步数据处理，另外该方法的第一个参数为当前页面组件的上下文对象。
fetch	与 `asyncData` 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 `fetch` 方法不会设置组件的数据。详情请参考关于 fetch 方法的文档。
head	配置当前页面的 Meta 标签, 详情参考页面头部配置 API。
layout	指定当前页面使用的布局（`layouts` 根目录下的布局文件）。详情请参考关于布局的文档。
loading	如果设置为`false`，则阻止页面自动调用`this.$nuxt.$loading.finish()`和`this.$nuxt.$loading.start()`,您可以手动控制它,请看例子,仅适用于在 nuxt.config.js 中设置`loading`的情况下。请参考API 配置 `loading` 文档。
transition	指定页面切换的过渡动效, 详情请参考页面过渡动效。
scrollToTop	布尔值，默认: `false`。用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于嵌套路由的应用场景。
validate	校验方法用于校验动态路由的参数。
middleware	指定页面的中间件，中间件会在页面渲染之前被调用，请参考路由中间件。

6.4HTML头部

Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) and html 属性。

Nuxt.js 使用以下参数配置 vue-meta:

{
  keyName: 'head', // 设置 meta 信息的组件对象的字段，vue-meta 会根据这 key 值获取 meta 信息
  attribute: 'n-head', // vue-meta 在监听标签时所添加的属性名
  ssrAttribute: 'n-head-ssr', // 让 vue-meta 获知 meta 信息已完成服务端渲染的属性名
  tagIDKeyName: 'hid' // 让 vue-meta 用来决定是否覆盖还是追加 tag 的属性名
}

6.4.1默认Meta标签

Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了：

注意: Nuxt.js 使用 hid 而不是默认值 vmid 识别元素key

一个使用自定义 viewport 和 谷歌字体 的配置示例：

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

7.异步数据

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

7.1asyncData方法

asyncData方法会在组件（限于页面组件！！！）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，你可以选择自己熟悉的一种来用：

返回一个 Promise, nuxt.js 会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
使用 async 或 await (了解更多)

我们使用 axios 重构 HTTP 请求, 我们 强烈建议您 使用我们的 axios 模块用于您的 Nuxt 项目中。

如果您的项目中直接使用了node_modules中的axios，并且使用axios.interceptors添加拦截器对请求或响应数据进行了处理，确保使用 axios.create创建实例后再使用。否则多次刷新页面请求服务器，服务端渲染会重复添加拦截器，导致数据处理错误。

import axios from 'axios'
const myaxios = axios.create({
  // ...
})
myaxios.interceptors.response.use(
  function (response) {
    return response.data
  },
  function (error) {
    // ...
  }
)

7.1.1返回Promise

export default {
  asyncData({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`).then(res => {
      return { title: res.data.title }
    })
  }
}

7.1.2使用async或await

export default {
  async asyncData({ params }) {
    const { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

7.1.3使用回调函数

export default {
  asyncData({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`).then(res => {
      callback(null, { title: res.data.title })
    })
  }
}

7.1.4返回对象

如果组件的数据不需要异步获取或处理，可以直接返回指定的字面对象作为组件的数据。

export default {
  data() {
    return { foo: 'bar' }
  }
}

7.1.5数据的展示

asyncData 方法返回的数据在融合 data 方法返回的数据后，一并返回给模板进行展示，如：

<template>
  <h1>{{ title }}</h1>
</template>

7.2上下文对象

可通过 API context 来了解该对象的所有属性和方法。

7.2.1使用req/res（request/response）对象

在服务器端调用asyncData时，您可以访问用户请求的req和res对象。

export default {
  async asyncData({ req, res }) {
    // 请检查您是否在服务器端
    // 使用 req 和 res
    if (process.server) {
      return { host: req.headers.host }
    }

    return {}
  }
}

7.2.2访问动态路由数据

您可以使用注入asyncData 属性的context对象来访问动态路由数据。例如，可以使用配置它的文件或文件夹的名称访问动态路径参数。所以，如果你定义一个名为_slug.vue的文件，您可以通过context.params.slug来访问它。

export default {
  async asyncData({ params }) {
    const slug = params.slug // When calling /abc the slug will be "abc"
    return { slug }
  }
}

7.2.3监听query参数改变

默认情况下，query 的改变不会调用asyncData方法。如果要监听这个行为，例如，在构建分页组件时，您可以设置应通过页面组件的watchQuery属性监听参数。

7.3错误处理

Nuxt.js 在上下文对象context中提供了一个 error(params) 方法，你可以通过调用该方法来显示错误信息页面。params.statusCode 可用于指定服务端返回的请求状态码。

以返回 Promise 的方式举个例子：

export default {
  asyncData({ params, error }) {
    return axios
      .get(`https://my-api/posts/${params.id}`)
      .then(res => {
        return { title: res.data.title }
      })
      .catch(e => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  }
}

如果你使用 回调函数 的方式, 你可以将错误的信息对象直接传给该回调函数， Nuxt.js 内部会自动调用 error 方法：

export default {
  asyncData({ params }, callback) {
    axios
      .get(`https://my-api/posts/${params.id}`)
      .then(res => {
        callback(null, { title: res.data.title })
      })
      .catch(e => {
        callback({ statusCode: 404, message: 'Post not found' })
      })
  }
}

8.插件

Nuxt.js 允许您在运行 Vue.js 应用程序之前执行 js 插件。这在您需要使用自己的库或第三方模块时特别有用。

需要注意的是，在任何 Vue 组件的生命周期内，只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

8.1使用第三方模块

我们可以在应用中使用第三方模块，一个典型的例子是在客户端和服务端使用 axios 做 HTTP 请求。

首先我们需要安装 npm 包：

npm install --save axios

在页面内这样使用：

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  import axios from 'axios'

  export default {
    async asyncData({ params }) {
      let { data } = await axios.get(`https://my-api/posts/${params.id}`)
      return { title: data.title }
    }
  }
</script>

8.2使用vue插件

假如我们想使用 vue-notifications 显示应用的通知信息，我们需要在程序运行前配置好这个插件。

首先增加文件 plugins/vue-notifications.js：

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

然后, 在 nuxt.config.js 内配置 plugins 如下

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

了解更多插件使用方法请移步至此

9.Vuex状态树

跟vuex使用一样，再次不多讲。也可以看看nuxtjs官网讲述的

10.命令

命令	描述
nuxt	启动一个热加载的 Web 服务器（开发模式） localhost:3000。
nuxt build	利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。
nuxt start	以生产模式启动一个 Web 服务器 (需要先执行`nuxt build`)。
nuxt generate	编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)。

如果使用了 Koa/Express 等 Node.js Web 开发框架，并使用了 Nuxt 作为中间件，可以自定义 Web 服务器的启动入口：

命令	描述
NODE_ENV=development nodemon server/index.js	启动一个热加载的自定义 Web 服务器（开发模式）。
NODE_ENV=production node server/index.js	以生产模式启动一个自定义 Web 服务器 (需要先执行 `nuxt build`)。

参数

您可以使用 --help 命令来获取详细用法。常见的命令有：

–config-file 或 -c: 指定 nuxt.config.js 的文件路径。
–spa 或 -s: 禁用服务器端渲染，使用 SPA 模式
–unix-socket 或 -n: 指定 UNIX Socket 的路径。

你可以将这些命令添加至 package.json：

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

这样你可以通过 npm run <command> 来执行相应的命令。如: npm run dev。

10.1开发模式

npm run dev

10.2 发布部署

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署和静态应用部署。

10.2.1服务端渲染应用部署

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成：

nuxt build
nuxt start

推荐的 package.json 配置如下：

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}