詳解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ù)。
踩過的坑
部署方式很簡(jiǎn)單對(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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn)一個(gè)vue公式編輯器組件demo
這篇文章主要介紹了輕松實(shí)現(xiàn)一個(gè)簡(jiǎn)單的vue公式編輯器組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
Vue3?pinia管理數(shù)據(jù)的3種方式代碼
在Vue3中Pinia是一個(gè)狀態(tài)管理庫,它提供了一種簡(jiǎn)單而強(qiáng)大的方式來管理應(yīng)用程序的狀態(tài),這篇文章主要給大家介紹了關(guān)于Vue3?pinia管理數(shù)據(jù)的3種方式,需要的朋友可以參考下2024-04-04
vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法
這篇文章主要介紹了vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法,在vite.config.ts文件中添加配置,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)
這篇文章主要為大家介紹了springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05

