nuxt 实战公司的网站重构，要求支持SEO，必须用服务端渲染。听到这个消息的时候，我开始兴奋起来了，因为ssr这个东西

公司的网站重构，要求支持SEO，必须用服务端渲染。听到这个消息的时候，我开始兴奋起来了，因为ssr这个东西出来了这么久但是我还没有亲手实践过，这次借助技术调研这个机会搞一下服务端渲染。

服务端渲染，顾名思义是将html模版拼接在服务端的模版上，在调用服务的时候，从服务端吐出页面。可以直接在浏览器查看网站源码中看到，页面是否有内容。这两年流行的spa单页面技术，由于数据是异步获取的，爬虫爬不到异步数据，所以SEO很差，服务端渲染的话，请求的内容直接在服务端就渲染好了，所以对提高网站的搜索质量有很大帮助。

像java的jsp，php的模版都是服务端渲染。但是对于前端工程化来说，服务端渲染都是在nodejs服务上进行的，网上调研了下常用的服务端渲染解决方案，有vue-cli3脚手架搭配使用，有nuxt。各自调研了下，发现nuxt对于我来说可能更加适合。有专门的脚手架工具，按照指令安装即可，文档也非常友好，模版语法在vue上加了几个新的钩子，用来处理服务端渲染的部分。

安装好了以后目录是这样一个结构：

.nuxt 是编译后产生的东西。(静态文件，服务端文件)
api是我新建的一个存放接口目录的文件夹
assets是脚手架生产的存放静态css，图片的文件夹
components是放通用组件的文件夹，在这个文件夹内，组件不会有asyncData这个方法去请求数据。
layouts是组织应用的布局组件，不可更改，里面放的footer，header一类的组件，基本不用动。
middleware是用于存放应用的中间件，一般放的是nodejs代码。
pages是网站的目录结构。里面自带一个index.vue，每新建一个目录，里面得有一个index.vue的文件夹作为根目录，nuxt会基于pages的结构生产路由。
plugins是用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。我存放的有axios，elementui的东西。
static静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，不可更改。
store 目录用于组织应用的 Vuex 状态树文件。 Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置，不可更改，我用来存放封装的axios和vuex。
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置，这个是核心文件，里面可以自定义配置nuxt 。