nuxtjs服務端部署流程

nuxt是一款基於vue的服務端渲染框架，語法和vue基本保持一致，不過生命週期與vue不一樣，部署方式也和vue截然不同，vue項目部署是spa的靜態頁面，只需build出來靜態頁面，可是nuxt是須要在服務端部署node服務，經過訪問node服務，node服務會將項目在服務器渲染完成再將數據返回，這樣返回的數據是一個完整的頁面，利於seo。

而vue項目返回客戶端時不是一個完整的頁面而是一個完整的項目，全部的dom元素均是經過js腳本添加到頁面中，而爬蟲是沒法爬取這樣的頁面的，天然也沒法作相關的seo優化。

nuxt的優點就是既保持的先後端分離的優勢點，又知足了有seo優化需求的項目。

一 生產環境打包

當咱們要部署nuxt項目的時候須要先經過

npm run build
複製代碼

打包生成生產環境部署文件，可是這個打包只會生成一個 .nuxt 文件夾，這個 .nuxt文件夾是在執行

npm run dev
複製代碼

也就是開發環境的時候也會生成的一個文件夾，因此打包後的結果就是emmm.... 目錄不會有任何變化，不會像vue那樣會會生成一個 dist 文件夾。能夠經過控制檯信息來了解打包信息。

二 複製文件

打包完成後須要將如下四個文件夾複製到服務器相關目錄下

.nuxt / static / package.json / nuxt.config.js
複製代碼

這四個文件是服務端渲染的必須文件，缺一不可，另外nuxt項目部署的時候是經過node服務來完成對客戶端請求的監聽，因此部署時候的目錄路徑沒有什麼太大的關係，不過有可能須要配合nginx來使用，因此通常都是放在nginx下的相關目錄。

而nginx使用與否取決於項目服務器，一般若是一個服務器上既有nuxt項目也有其餘項目的時候就須要nginx來作路徑轉發，由於nuxt項目部署的時候通常狀況下只能經過根路徑訪問，若是須要經過二級路徑訪問那須要在項目中作特殊配置。

三 安裝依賴

將文件複製到服務器後，須要執行

npm install
複製代碼

來安裝項目依賴，這一步是須要服務器有node環境支持的，而安裝node的時候注意須要安裝node正式版，不要安裝node最新版。

四 啓用服務

安裝完依賴後就能夠經過如下命令來啓用服務了

npm  start
複製代碼

啓用服務後就能夠經過相關ip和端口來訪問你的項目了。也能夠經過PM2來啓動後臺駐守，這種方式適合手動部署，若是是經過gitlab-ci作自動化部署的話用npm start 就能夠了

五 注意點

1.若是啓用不了服務，有多是啓用ip的問題，nuxt默認啓用的是127.0.0.1這個ip在本地沒問題，可是在服務器上有可能就不太靈了，能夠把ip換成0.0.0.0，這個ip會自動啓用服務器真實ip。

2.若是安裝不了依賴，有多是node版本問題，能夠在服務器上經過node版本管理工具來切換node版本試試。

3.這樣部署的服務只能經過根域名來訪問，既相似於127.0.0.1 相似於這樣的訪問路徑，若是服務器根路徑被佔用的話就須要部署在二級路徑，相似於 127.0.0.1/web/ 這樣的訪問方式，若是須要這樣訪問的話就須要在項目中配置baseurl

www.gxshuke.com 這個是經過nuxt 方式部署的官網，點擊能夠查看詳情