初识nuxt.js:用nuxt.js对现有vue项目进行SSR服务端渲染改造

最近用vue写了公司部门的官网，但是spa单页面应用首屏加载有些慢，体验不好，而且SEO极不友好，于是学了学nuxt把项目改造成后端渲染。因为是第一次用nuxt，也遇上一些坑，在次记录一下，加深印象。

1.什么是nuxt.js？为什么用它？

nuxt.js是一个基于 Vue.js 的通用应用框架，官网https://zh.nuxtjs.org/guide/有着详细的说明，最常用的就是用来作SSR(服务器渲染)。众所周知，SPA单页应用不利于搜索引擎的SEO操作，因为SPA的HTML只有一个无实际内容的HTML和一个app.js，像百度等搜索引擎很难抓取到页面。而SSR生成的HTML是有内容的，可以设置全局以及每个页面的meta标签内容，这让搜索引擎能够索引到页面内容。同时SSR直接将HTML字符串传递给浏览器，也大大加快了首屏加载时间。

2.安装

关于安装，官网https://zh.nuxtjs.org/guide/installation也给出了详细的步骤，跟着一步一步来就可以创建起一个新手模板,可以选择服务端框架、UI框架、测试框架等等

3.项目目录结构

下面左边是vue项目目录，右边是nuxt项目目录。

            

 

 

 目录说明：

1、assets
存放静态资源，less、sess等，但是和static还是有一些区别的，assets里的静态资源会被webpack打包。
2、components
存放我们写好的公共组件。
3、dist
通过运行npm run generate 生成的静态目录，静态部署也是nuxt的一个创新。
4、layouts
组织应用的布局组件。
5、middleware
中间件，现在暂时还没使用过。
6、pages
布局页面组件，会自动根据pages下的目录生成router.js文件。
7、plugins
页面中使用到的插件，配置。
8、static
静态文件，不会被webpack打包
9、store
vuex的配置，暂时也还没使用。
10、nuxt.config.js
nuxt的配置文件，配置全局head，loading，css，plugins，proxy等。

4.配置全局CSS

在assets中新建全局的css文件，然后在nuxt.config.js中配置，nuxt中可以直接用@或者~来选择src文件夹

 

5.配置插件

用npm安装插件后需要在plugins文件夹中新建js文件，然后import vue和所安装插件，使用vue.use()来安装，最后在config中配置。ssr表示插件需不需要后端渲染。

 

 

 

 6.loading以及过渡动效配置

loading配置比较简单，详细请看https://zh.nuxtjs.org/api/configuration-loading

过渡动效只需在全局css中写这两组类即可：

 

 

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

 

 

 具体可查官网

 

7.proxy代理配置

 先安装axios，然后再config配置

 

 

 8.layout布局

因为有之前的vue项目，所以布局可以直接复制过来，要改的基本不多，<router-link>换成<nuxt-link>,<router-view>换成<nuxt>,别的基本不变

 

 

 

 9.pages页面文件

页面文件也是直接从之前写好的vue项目中复制过来的，改动也不多。需要注意的就是pages里的文件结构，因为nuxt的路由是根据pages里的结果自动生成的。文档里有详细说明https://zh.nuxtjs.org/guide/routing，

这次项目也只用到了动态路由。

另外一个就是异步数据 asyncData()，nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据，但是由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this来引用组件的实例对象。asyncData也有很多用法，我比较习惯用async await，最后需要的数据需要return出去。

 

 

10.打包部署

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

服务端渲染：

1.搭建nginx+node+npm+pm2环境

2.配置nginx代理监听端口，package打包时端口，在nginx的 vhost里新建一个主机绑定

3.npm run build 打包应用

4.上传文件

 

 

 5.在服务器上部署运行，运行npm install安装依赖，行npm start 就可以运行起来nuxt的服务渲染

6.pm2开启进程守护，运行pm2 start npm --name "my-nuxt" -- run start

静态应用部署：tongs

运行npm run generate进行打包，打包后在dist文件夹中每个对应的页面都会生成一个html，然后各种发布操作和vue一样的。这样打包有一个弊端，当首屏的数据发生更改的时候，页面显示的还是之前的数据，要想改变的话，需要重新打包发布才行。

 

遇到的一个问题：

Window 或 Document 对象未定义？

在项目中使用wow.js，就遇到了这个问题。原因是因为node服务端并没有window 或 document 对象，所以会出现未定义。解决办法是通过环境判断来进行包的导入