詳解Nuxt.js部署及踩過的坑
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ù)。
踩過的坑
部署方式很簡單對(duì)不對(duì)，看完文檔后我就在自己買的服務(wù)器上嘗試部署一下，然后，BOOM?。?！
每次在服務(wù)器上執(zhí)行nuxt build，總是有如下報(bào)錯(cuò)，并且jenkins會(huì)隨之掛掉。
error Command failed with signal "SIGKILL".
看了一下服務(wù)器監(jiān)控發(fā)現(xiàn)build的時(shí)候cpu和內(nèi)存飆升，尤其是內(nèi)存。。。
好吧，我買的是阿里最低配的ECS，升級(jí)配置是最后的選擇，在這之前只能另辟蹊徑。
另辟蹊徑
既然服務(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里也會(huì)生成一個(gè)dist文件夾，我們希望gitignore的只有/dist而不是/.nuxt/dist，因此猜需要做出這里的修改。
nuxt部署
最后，我們使用pm2來部署nuxt。
pm2 start npm --name nuxt -- start
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
懶加載是一種網(wǎng)頁優(yōu)化技術(shù)，也被稱為延遲加載，它的主要目的是在網(wǎng)頁加載時(shí)，只加載當(dāng)前可見區(qū)域內(nèi)的內(nèi)容，而延遲加載其他不可見區(qū)域的內(nèi)容，從而提高網(wǎng)頁的加載速度和性能，這篇文章主要介紹了vue圖片懶加載的兩種方法,需要的朋友可以參考下2023-07-07
構(gòu)建Vue大型應(yīng)用的10個(gè)最佳實(shí)踐(小結(jié))
這篇文章主要介紹了構(gòu)建Vue大型應(yīng)用的10個(gè)最佳實(shí)踐(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue項(xiàng)目如何設(shè)置全局字體樣式font-family
這篇文章主要介紹了vue項(xiàng)目如何設(shè)置全局字體樣式font-family問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載示例
這篇文章主要為大家介紹了vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了vue將數(shù)字轉(zhuǎn)為中文大寫金額方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟
upload上傳是前端開發(fā)很常用的一個(gè)功能,在Vue開發(fā)中常用的Element組件庫也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下2023-12-12
基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了用Vue寫一個(gè)分頁器的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04