最近一直在使用 Vue 做項(xiàng)目，一直寫(xiě)業(yè)務(wù)凤覆，時(shí)間長(zhǎng)了沒(méi)有太多成就感链瓦。然后自己就想做一個(gè)個(gè)人博客玩一玩（繩命在于折騰），了解一下接口開(kāi)發(fā)，項(xiàng)目部署等等慈俯。所有東西做下來(lái)確實(shí)學(xué)習(xí)到了不少東西渤刃。
預(yù)覽地址
服務(wù)端渲染：http://202.5.16.37
非服務(wù)端渲染：http://202.5.16.37:8888
管理后臺(tái)：http://202.5.16.37:8080
接口開(kāi)發(fā)
一開(kāi)始打算先去學(xué)習(xí) go 語(yǔ)言再來(lái)開(kāi)發(fā)，但是中途在 Github 上看到一個(gè)博客項(xiàng)目 ‘elapse’ 做的還挺好的贴膘，就去看一下服務(wù)端的源碼卖子。發(fā)現(xiàn)用 Node + koa + mongodb 寫(xiě)的，看起來(lái)也不是很難刑峡，于是我就開(kāi)始照葫蘆畫(huà)瓢洋闽，按照自己的需求開(kāi)發(fā)自己的業(yè)務(wù)。寫(xiě)接口還算比較快突梦，遇到的問(wèn)題像跨域诫舅、token 在 elapse 都可以找到解決辦法，在這里我也不再贅述了阳似。我的服務(wù)端的源碼在此骚勘、接口文檔铐伴，寫(xiě)的不好撮奏，有時(shí)間再重構(gòu)。
前端頁(yè)面開(kāi)發(fā)
之前所有的項(xiàng)目都是用 Vue 開(kāi)發(fā)当宴，所以這個(gè)前端頁(yè)面對(duì)于我來(lái)說(shuō)算是小菜畜吊，沒(méi)太大的挑戰(zhàn)，很快就開(kāi)發(fā)完了户矢，但是用 Vue 開(kāi)發(fā)的后果就是 SEO 不好玲献，鼠標(biāo)右鍵顯示頁(yè)面源碼看下效果
可以看到 body 標(biāo)簽里面就一個(gè)空的 div 以及其他的 script 標(biāo)簽，這就是國(guó)內(nèi)搜索引擎看到的效果梯浪，完全不知道你想要顯示什么東西捌年。因?yàn)轫?yè)面上的東西都是這個(gè)空白頁(yè)出來(lái)之后再去加載的。比如有個(gè)用戶上次看了你的一片文章挂洛，但是沒(méi)有收藏礼预，只是記得部分內(nèi)容，想要從搜索引擎中搜的話虏劲，基本是不可能的了托酸。源碼在此（公司的項(xiàng)目都是外包，效果出來(lái)了就好了柒巫，沒(méi)有人去在乎什么 SEO励堡， 噓，小聲點(diǎn)１ぬ汀）应结。出于學(xué)習(xí)的目的，這個(gè)前端頁(yè)面我覺(jué)得還是要用 Nuxt 重構(gòu)一下泉唁。先看下效果對(duì)比一下鹅龄，頁(yè)面內(nèi)容很多币狠，只截取了一部分。
這下搜索引擎就能讀取到頁(yè)面的內(nèi)容砾层，用戶頁(yè)可以搜索到了漩绵。對(duì)于沒(méi)有接觸過(guò) Nuxt 的童鞋，我建議還是先看下官方文檔肛炮，我遇到的很多問(wèn)題基本在常見(jiàn)問(wèn)題中都可以找到答案止吐。部署的問(wèn)題，文檔寫(xiě)的是
服務(wù)端渲染應(yīng)用部署
部署 Nuxt.js 服務(wù)端渲染的應(yīng)用不能直接使用nuxt命令侨糟，而應(yīng)該先進(jìn)行編譯構(gòu)建碍扔，然后再啟動(dòng) Nuxt 服務(wù)，可通過(guò)以下兩個(gè)命令來(lái)完成：nuxt build nuxt start
然后我在服務(wù)器上運(yùn)行的時(shí)候就可以訪問(wèn)秕重，一斷開(kāi) ssh 連接不同，服務(wù)也就掛了。然后我在網(wǎng)上查找關(guān)于 Nuxt 部署的問(wèn)題溶耘，看到很多人還以為和非服務(wù)端渲染一樣二拐，要打包之后用 ftp 上傳到服務(wù)器再用 nginx 方向代理。 需要注意的是 Nuxt 服務(wù)端渲染也是一個(gè) Node 應(yīng)用 凳兵，所以還是和服務(wù)端代碼一樣使用 pm2 開(kāi)啟服務(wù)百新，命令如下 pm2 start npm -- start，服務(wù)端渲染源碼在此庐扫，如果你想在本地開(kāi)發(fā)饭望，可以修改assets/config.js來(lái)修改頁(yè)面配置。
管理后臺(tái)
因?yàn)橹皇俏易约涸谟玫男瓮ィ圆](méi)有用 Nuxt 重構(gòu)铅辞，源碼在此
如果文章對(duì)你有所幫助，那么請(qǐng)您點(diǎn)一下?
由于本人水平有限萨醒，如有錯(cuò)誤斟珊，歡迎大家指正。如果你在操作過(guò)程中發(fā)現(xiàn)一些沒(méi)有講到的錯(cuò)誤或者問(wèn)題验靡，歡迎在評(píng)論留言倍宾，一起探討，共同學(xué)習(xí)進(jìn)步胜嗓！
