最近一直在使用 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 重構，源碼在此

如果文章對你有所幫助，那么請您點一下? 由于本人水平有限，如有錯誤，歡迎大家指正。如果你在操作過程中發現一些沒有講到的錯誤或者問題，歡迎在評論留言，一起探討，共同學習進步！

轉載于:https://juejin.im/post/5acb1406518825619d4d11c5

總結

以上是生活随笔為你收集整理的Nuxt 实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。