Nuxt 實踐

最近一直在使用 Vue 作項目，一直寫業務，時間長了沒有太多成就感。而後本身就想作一個我的博客玩一玩（繩命在於折騰），瞭解一下接口開發，項目部署等等。全部東西作下來確實學習到了很多東西。

預覽地址

服務端渲染：http://202.5.16.37

非服務端渲染：http://202.5.16.37:8888

管理後臺：http://202.5.16.37:8080

接口開發

一開始打算先去學習 go 語言再來開發，可是中途在 Github 上看到一個博客項目 ‘elapse’ 作的還挺好的，就去看一下服務端的源碼。發現用 Node + koa + mongodb 寫的，看起來也不是很難，因而我就開始照葫蘆畫瓢，按照本身的需求開發本身的業務。寫接口還算比較快，遇到的問題像跨域、token 在 elapse 均可以找到解決辦法，在這裏我也再也不贅述了。個人服務端的源碼在此、接口文檔，寫的很差，有時間再重構。

前端頁面開發

以前全部的項目都是用 Vue 開發，因此這個前端頁面對於我來講算是小菜，沒太大的挑戰，很快就開發完了，可是用 Vue 開發的後果就是 SEO 很差，鼠標右鍵顯示頁面源碼看下效果

能夠看到 body 標籤裏面就一個空的 div 以及其餘的 script 標籤，這就是國內搜索引擎看到的效果，徹底不知道你想要顯示什麼東西。由於頁面上的東西都是這個空白頁出來以後再去加載的。好比有個用戶上次看了你的一片文章，可是沒有收藏，只是記得部份內容，想要從搜索引擎中搜的話，基本是不可能的了。源碼在此（公司的項目都是外包，效果出來了就行了，沒有人去在意什麼 SEO， 噓，小聲點！）。出於學習的目的，這個前端頁面我以爲仍是要用 Nuxt 重構一下。先看下效果對比一下，頁面內容不少，只截取了一部分。

這下搜索引擎就能讀取到頁面的內容，用戶頁能夠搜索到了。對於沒有接觸過 Nuxt 的童鞋，我建議仍是先看下官方文檔，我遇到的不少問題基本在常見問題中均可以找到答案。部署的問題，文檔寫的是

服務端渲染應用部署 部署 Nuxt.js 服務端渲染的應用不能直接使用nuxt命令，而應該先進行編譯構建，而後再啓動 Nuxt 服務，可經過如下兩個命令來完成：

nuxt build
nuxt start
複製代碼

而後我在服務器上運行的時候就能夠訪問，一斷開 ssh 鏈接，服務也就掛了。而後我在網上查找關於 Nuxt 部署的問題，看到不少人還覺得和非服務端渲染同樣，要打包以後用 ftp 上傳到服務器再用 nginx 方向代理。 須要注意的是 Nuxt 服務端渲染也是一個 Node 應用 ，因此仍是和服務端代碼同樣使用 pm2 開啓服務，命令以下 pm2 start npm -- start，服務端渲染源碼在此，若是你想在本地開發，能夠修改assets/config.js來修改頁面配置。

管理後臺

由於只是我本身在用的，因此並無用 Nuxt 重構，源碼在此

若是文章對你有所幫助，那麼請您點一下❤ 因爲本人水平有限，若有錯誤，歡迎你們指正。若是你在操做過程當中發現一些沒有講到的錯誤或者問題，歡迎在評論留言，一塊兒探討，共同窗習進步！