Nuxt.js服务端渲染seo页面优化

其实就是为了解决SEO的问题。如果SPA应用也有良好的SEO，就不用服务器端渲染这么麻烦了。当然服务器端渲染能解决的首屏加载速度的问题也是原因之一。

为什么要用服务器端渲染？

优点

· 有利于SEO。

· 首屏加载速度快。因为SPA引用需要在首屏获取所有资源，而服务器端渲染直接拿了成品展示出来就行了。

· 无需占用客户端资源。解析模板工作交给服务器完成，对于客户端资源占用更少。

缺点

· 占用服务器资源。服务器端完成html模板解析，如果请求较多，会对服务器造成一定的访问压力。

· 不利于前后端分离。

Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架。预设了服务器端渲染所需的各种配置，如异步数据，中间件，路由，只要遵循其中的规则就能轻松实现SSR，只需要按照对应的文件夹层级创建 .vue 文件就行，nuxt 会在模板输出之前异步请求数据，内置了 webpack，nuxt 会根据配置打包对应的文件。

node安装

node官网安装（nodejs.cn/）

安装 cnpm
使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

nuxt 项目创建

创建：vue init nuxt-community/starter-template <project-name>

安装依赖：npm install

运行： npm run dev

http://localhost:3000 页面运行地址!

nuxt 项目目录

我自己创建的项目结构，结合官网项目结构就能知道每个文件夹是干什么的。

nuxt.config.js这是nuxt 的配置js文件官网也有对应参数意义。

nuxt 项目讲解

nuxt.js官网也给出了一个完整的服务器请求到渲染的流程图

nuxt路由机制

pages目录中的任何Vue组件都会基于他们的文件名称和目录结构自动添加到vue-router中。Nuxt可以生成对应的路由配置

assets和static

assets包含未编译的资源，与nuxt如何工作没有太多关系。

static包含一些映射到你的站点的根目录的静态文件。

middleware

中间件（middleware）是允许你定义一个自定义函数比如我们在渲染页面之前判断权限的拦截，或者根据用户权限跳转到相应的路由等。

1、首先我们需要在middleware文件夹中添加auth.js

2、在nuxt.config.js文件中配置

plugins

以配置需要在vue应用实例化之前需要运行的js插件，可以是你自己写的库或是第三方库。

在nuxt.config.js中配置plugins字段

nuxt.config.js文件其他配置

· head 一般用于配置默认的meta标签

· css 用于定义应用的全局样式文件，模块或第三方库

· loading 个性化定制加载组建

· env 定义用于客户端和服务端的环境变量

nuxt部署

打包编译： npm run build

将文件夹都要拖动到nginx中html中，除了node_moudles

node_modules 也是在当前文件夹中 npm install 安装依赖
运行 npm start 将nuxt的服务器运行才能实现ssr服务器渲染

进程守护

我在前面提到要npm start 才能启用服务器，在windows下，会有一个窗口，项目就是运行的，窗口不在，项目就是关闭的，不可能一个窗口一直存在，所以需要一个后台来执行，liunx好像也有自己的命令来启动一个后台进程，我并没有尝试，我是直接选择的pm2

cnpm install -g pm2 安装进程守护

进程后台启动 pm2 start npm --name "your-project-name" -- start --watch

加上watch 的属性可以观察项目文件变化，重启我们的项目nuxt 这样就不用每次更新项目

nginx的相关配置

上面3000端口是我们的nuxt的运行端口，nginx监听一下我们nuxt的端口就可以用nginx下面的ip访问了。