浅谈Vue服务端渲染框架Nuxt的那些事

Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。

我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型webApp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。webpack盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。

因此，对于那些展示宣传型页面，如官网，必须进行服务端渲染（SSR）。

Vue官方SSR文档的配置太过繁琐，需要对node和webpack有相当不错的使用经验，对于一个前端小白而言，官方推荐NUXT。

NUXT是一款基于vue的服务端渲染框架，跟React的NEXT异曲同工。

最近公司在重构项目，为了有利于SEO，需要使用到服务端渲染，在查阅了一番资料后选择了Nuxt.js，Nuxt.js 是一个基于 Vue.js 的通用应用框架，详情可以看官网，这里主要记录下在使用过程中遇到的问题及解决方案。

技术栈：Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios

项目构建

Nuxt.js 官方提供了脚手架「 确保安装了npx（npx在NPM版本5.2.0默认安装了）」

npx create-nuxt-app <项目名>  按照提示选择适合自己项目的配置即可

然后 npm run dev。

遇到的问题

一、router自定义

发现现在很多的框架都有一套自己的路由生成规则（基于vue-router）然后在对应的目录下创建目录，即会自己生成对应的路由，如果对url的路径没有要求的这样也是可以的，如果想要自定义路由的话，就需要添加些配置。具体如下：

  extendRoutes (routes, resolve) {   routes.push({    name: 'father',   /** 自定义路由的name **/    path: '/father',  /** 自定义路由的path **/    component: resolve(__dirname, 'pages/father/index.vue'), /** 组件路径 **/    children: [{  /** 子路由配置 （其它相同） **/     name: 'son',     path: '/son',     component: resolve(__dirname, 'pages/son/index.vue')    },    {     name: 'daughter',     path: '/daughter',     component: resolve(__dirname, 'pages/daughter/index.vue')    }]   })  }

对应的参考官方Nuxt.js自定义路由

自定义请求头（基于axios请求的base_url修改）

需求描述：公司的有正式环境和特使环境对应不同的服务器，所以需要在请求的时候添加对应的请求头，具体配置可以参考如下代码：

package.json配置：