nuxt 实战

        公司的网站重构，要求支持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 。

以上就是nuxt .config的配置，配置了访问端口，页面的默认head，meta，初始css和elementui，less-loader，还有axios的配置。

服务端渲染请求的异步内容放在asyncData这个钩子方法里来作，切记！要想给爬虫爬到异步数据或者组件，加载方法必定要放到created钩子里面写，不能放mounted里。以下图：

也能够自定义每个页面的head meta description等信息，更好的支持搜索引擎的检索。

带参数跳转用： this.$router.push({name: ‘map-mapView’, query: {id: xxx}}这种目录名-目录详情的方式，若是想定制化url，好比 http://www.xxx.com/id/3 ，这样history模式的url，能够在目录底下新建一个_id.vue 文件夹，用这样

this.$router.push({

  path: `id/${params.name}`,

  params: params

})的方式跳转就能够啦。

其余的方式就跟vue同样的正常使用便可。

参考文章：zh.nuxtjs.org/guide#%E9%9…