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配置：