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…