基于Nuxt的Vue.js服务器端渲染实践详解

Vue.js是目前最热门的前端框架之一，Nuxt.js是针对vue.js的服务器端渲染框架，通过高度定制的配置和简单的API，开发者可以快速开发服务器端渲染项目。本文将简要介绍Nuxt.js框架。

服务器渲染

服务器端渲染并不是一个新概念。在单页应用程序流行之前，页面是由服务器呈现并传递给浏览器的。当用户需要访问新页面时，他们需要再次请求服务器并返回新页面。

为了优化体验，开发人员开始选择JavaScript在前端完成渲染过程，通过将前端和后端分离，让后端更加注重数据，而前端更加注重处理和显示，通过精心设计的API和Ajax技术完成前端和后端的交互。jQuery、React.js、Vue.js、Angular.js等框架应运而生。

这些框架给开发者带来了很大的便利，但是对于一些论坛、信息网站或者企业的官方网站来说，对搜索引擎优化(SEO)有很强的要求，前端渲染技术无法满足他们的需求。如果不能通过搜索引擎输出自己的内容，网站的价值会受到很大的影响。要解决这种问题，您仍然需要在服务器上进行渲染。

本文将介绍Vue.js的服务器端渲染解决方案Nuxt.js在Vue.js推出后，其数据驱动和基于组件的思想，以及其简单易用性，给开发者带来了极大的便利。Vue.js提供的官方vue-server-renderer可以用于服务器端渲染，但需要额外的工作量，开发体验有待提升。但是在Nuxt.js推出后，这个问题得到了很好的解决。

Nuxt.js简介

Nuxt.js是基于Vue.js的通用应用框架，Nuxt.js预置了使用vue.js在服务器端渲染开发应用所需的各种配置，一键即可生成静态站点。同时，Nuxt.js的热加载机制让开发者开发网站非常方便。

Nuxt.js于2016年10月25日发布。上线不到一年，却广受好评。最新的稳定版本是0.10.7，目前还在进行1.0版本的内部测试。Nuxt.js社区正在逐步完善，官网已经支持中文文档。

易于上手

Vue.js的vue-cli工具让我们很容易用现成的模板初始化Vue.js项目，而Nuxt.js团队则为我们提供了一个初始化Nuxt.js项目的模板。安装vue-cli后，我们只需要在命令行中输入即可。

Vue init nuxt/starter projectName可以完成项目的创建，然后进入项目目录执行以下命令：

Npm installnpm run devNuxt.js将使用端口3000来运行该服务。在浏览器中输入http://localhost:3000，可以看到一个带有Nuxt.js的原始页面

项目目录

完成一个简单的Hello World项目后，让我们进一步学习Nuxt.js进入Nuxt.js项目后，项目目录如下：

以下是每个目录的角色简介：nuxt/:用于存储Nuxt.js的核心库文件，比如可以在这个目录中找到server.js文件，它描述了Nuxt.js的服务器端渲染逻辑(见下一段“Nuxt.js渲染过程”)，router.js文件中包含一个自动生成的路由表。

Assets/:用于存储静态资源。该目录中的资源是使用Webpack构建的。

Components/:存储项目中的各种组件。请注意，只有该目录中的文件才能称为组件。

布局/:创建自定义页面布局，这可以在此目录中创建全局页面的统一布局或不正确的页面布局。如果需要在布局中的pages目录中呈现路由页面，则需要在布局文件中添加nuxt/tag。

中间件/:放置自定义中间件，在加载组件之前会调用。

Pages/:在这个目录下，Nuxt.js会根据目录结构生成vue-router路由，如下图所示。

Plugins/:自定义插件可以放在这个目录中，并在根Vue对象实例化之前运行。例如，项目中的嵌入式逻辑可以打包成一个插件，放在这个目录中，并加载到nuxt.config.js中

Static/:没有Webpack构建的静态资源将被映射到根路径，例如robots.txt

Store/:存储Vuex状态树。

nuxt . config . js:nuxt . js的配置文件详细如下。

Nuxt.js的渲染过程

Nuxt.js通过构建在Vue.js上的一系列方法进行服务器端渲染，具体过程如下：

调用nuxtServerInit方法

请求打字时，先调用nuxtServerInit方法，可以提前保存服务器的数据，比如登录的用户信息。此外，该方法还可以执行异步操作，并等待数据被解析后再返回。

中间件层

在第一步之后，请求将进入中间件层，这里有三个步骤：

读取nuxt.config.js中全局中间件字段的配置，调用对应的中间件方法，匹配加载请求对应的布局调用布局和页面的中间件方法

调用validate方法

在这一步中，您可以验证请求参数或服务器在第一步中分发的数据。如果验证失败，将抛出一个404页。

调用提取和异步数据方法

这两种方法都是在组件加载之前调用的，它们的职责是不同的。asyncData用于异步初始化组件数据，fetch方法侧重于异步获取数据后在Vuex中修改状态。

我们可以在Nuxt.js的源代码util.js中看到以下方法：

导出函数applyAsyncData (Component，async data={ }){ const Component data=Component . options . data | | noopData Component . options . data=function(){ const data=Component data . call(this)return <.数据，asyncData}} if(组件。_ ctor组件。_ ctor . options){组件。_ ctor . options . data=component . options . data } }调用asyncdata方法后将调用此方法。可以看到，组件从asyncData方法获得的数据会与组件的原生数据方法获得的数据合并，最终会在data方法中返回，因此可以得出结论，asyncData方法实际上是原生数据方法的扩展。

完成以上四个步骤后，下一步是渲染组件的工作。整个过程可以用下图来表示：

(来源：Nuxt.js官网)

如上所述，在。nuxt目录下，可以找到server.js文件，该文件封装了服务器端渲染Nuxt.js的逻辑，包括Promise对象的完整链式调用，从而完成上述整个服务器端渲染步骤。

Nuxt.js的一些使用技巧

nuxt.config.js的配置

Nuxt.config.js是Nuxt.js的配置文件，可以通过设置一系列参数来配置nuxt.js项目。你可以在nuxt.js的官网找到这个文件的描述，下面是一些常见的配置：

Head:可以在这个配置项中配置全局Head，比如定义网站的标题和元，引入第三方的CSS和JavaScript文件等。

Head: {title: '平民商店'，meta :[{ charset : ' utf-8 ' }，{name :' viewport '，content : ' width=device-width，initial-scale=1'}，{ name : ' applied-device '，content: 'pc，mobile' }，]，link: [ { rel: '样式表'，type: ' text例如，通过供应商字段引入第三方模块，通过插件字段配置Webpack插件，以及通过加载器字段定制Webpack加载器。一般我们会在build的厂商领域引入axios模块，在项目中进行HTTP请求(axios也是Vue.js官方推荐的HTTP请求框架)。

build : { vendor :[' core-js '，' axios']，loaders: [ { test: /\。(scss|sass)$/，use :[{ loader : ' style-loader ' }，{ loader: 'css-loader' }，{ loader: 'sass-loader' }] }，{ test: /\。(png|jpe？g|gif|svg)$/，loader: 'url-loader '，query: { limit: 1000，name: 'img/[name]。[hash:7]。[ext]' } }，{ test: /\。(woff2？|eot|ttf|otf)(\？*)?$/，加载程序： ' URL-加载程序'，查询： {限制： 1000，名称： '字体/[名称]。[hash :7]。[ext]'}}]} CSS :在这个配置项中，引入了全局CSS文件，然后每一页都会

Router:可以在这里配置基本的路由规则和中间件。例如，您可以创建一个用于获取用户代理的中间件，并将其加载到这里。

Loading: Nuxt.js提供了一组页面内加载进度指示组件，您可以在其中配置颜色、禁用或配置自定义加载组件。

Env:可以在这里配置服务器和客户端之间共享的全局变量。

目录是一条路线

Nuxt.js在vue-router上定义了一套自动生成规则，是根据页面的目录结构生成的。例如，我们有以下目录结构：

该目录包含一条基本路由(不带参数)和两条动态路由(带参数)。Nuxt.js将生成以下路由配置表(可以在。nuxt目录):

routes: [ { path: '/'，component: _abe13a78，name: 'index' }，{ path: '/article/:id '？component3360 _ 48f202f2，name:' article-id'}，{path:'/:page '，component: _ 5ccbb43a，name:' page'}]对于article-id的路由，路径中有：id。参数，指示这是可选路由。如果需要，必须在文章目录中添加index.vue文件。

请看下面的例子：

因为同名文件和文件夹的存在，Nuxt.js会为我们生成嵌套路由。生成的路由结构如下。使用时，需要添加nuxt-child/tag来显示子视图的内容。

routes :[{ path : '/article '，component: _f930b330，children 3360[{ path : ' '，component: _1430822a，name: ' article ' }，{path:' : id '，component: _ 339e8013，name3360' article-id'}]}]此外，Nuxt.js

摘要

虽然Nuxt.js是一个非常年轻的框架，目前还有很多问题需要改进，但是它的出现为Vue.js开发者构建服务器端渲染项目提供了极大的便利，预计在Nuxt.js is版本发布后，会给我们带来更多实用的新功能。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。