這篇文章主要介紹Nuxt.js部署的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供和平網(wǎng)站建設(shè)、和平做網(wǎng)站、和平網(wǎng)站設(shè)計(jì)、和平網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、和平企業(yè)網(wǎng)站模板建站服務(wù)，10余年和平做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署。

靜態(tài)應(yīng)用部署就不說了，主要說說服務(wù)端渲染應(yīng)用部署。

官方推薦部署方式

關(guān)于服務(wù)端渲染應(yīng)用部署，官方文檔是這么寫的：

部署 Nuxt.js 服務(wù)端渲染的應(yīng)用不能直接使用 nuxt 命令，而應(yīng)該先進(jìn)行編譯構(gòu)建，然后再啟動(dòng) Nuxt 服務(wù)，可通過以下兩個(gè)命令來完成：

nuxt build
nuxt start

推薦的 package.json 配置如下：

{
 "name": "my-app",
 "dependencies": {
  "nuxt": "latest"
 },
 "scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start"
 }
}

提示： 建議將 .nuxt 加入 .npmignore 和 .gitignore 文件中。

意思是說.nuxt不加入到版本控制，每次服務(wù)器從gitlab上拉代碼后先執(zhí)行nuxt build生成.nuxt文件夾，然后再執(zhí)行nuxt start來啟動(dòng)服務(wù)。

踩過的坑

部署方式很簡單對不對，看完文檔后我就在自己買的服務(wù)器上嘗試部署一下，然后，BOOM！?。?/p>

每次在服務(wù)器上執(zhí)行nuxt build，總是有如下報(bào)錯(cuò)，并且jenkins會隨之掛掉。

error Command failed with signal "SIGKILL".

看了一下服務(wù)器監(jiān)控發(fā)現(xiàn)build的時(shí)候cpu和內(nèi)存飆升，尤其是內(nèi)存。。。

好吧，我買的是阿里最低配的ECS，升級配置是最后的選擇，在這之前只能另辟蹊徑。

另辟蹊徑

既然服務(wù)器上build不了，那我們就本地build再上傳，在.gitignore里把.nuxt去掉、并把dist改為/dist，然后本地執(zhí)行yarn build，成功之后再上傳到github上，檢查一下.nuxt是否有上傳上去。

之后在服務(wù)器上把代碼拉下來、安裝一下依賴，執(zhí)行nuxt start就可以了。

這里還有個(gè)坑，就是為什么要把.gitignore里的dist改為/dist？

/dist這個(gè)文件夾是執(zhí)行nuxt generate后生成的，用來做靜態(tài)應(yīng)用部署的，這部分就跟通常情況下的.nuxt一樣是不應(yīng)該加入到版本控制里的，但由于nuxt build之后，在.nuxt里也會生成一個(gè)dist文件夾，我們希望gitignore的只有/dist而不是/.nuxt/dist，因此猜需要做出這里的修改。

nuxt部署

最后，我們使用pm2來部署nuxt。

pm2 start npm --name nuxt -- start

以上是“Nuxt.js部署的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！