欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Nuxt.js部署及踩過的坑

 更新時間:2018年08月07日 10:34:07   作者:Lewis19990  
這篇文章主要介紹了詳解Nuxt.js部署及踩過的坑,Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式:服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署。本文主要說說服務(wù)端渲染應(yīng)用部署,感興趣的小伙伴們可以參考一下

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)該先進行編譯構(gòu)建,然后再啟動 Nuxt 服務(wù),可通過以下兩個命令來完成:

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來啟動服務(wù)。

踩過的坑

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

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

error Command failed with signal "SIGKILL".

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

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

另辟蹊徑

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

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

這里還有個坑,就是為什么要把.gitignore里的dist改為/dist?

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

nuxt部署

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

pm2 start npm --name nuxt -- start

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue圖片懶加載的兩種方法詳解

    vue圖片懶加載的兩種方法詳解

    懶加載是一種網(wǎng)頁優(yōu)化技術(shù),也被稱為延遲加載,它的主要目的是在網(wǎng)頁加載時,只加載當(dāng)前可見區(qū)域內(nèi)的內(nèi)容,而延遲加載其他不可見區(qū)域的內(nèi)容,從而提高網(wǎng)頁的加載速度和性能,這篇文章主要介紹了vue圖片懶加載的兩種方法,需要的朋友可以參考下
    2023-07-07
  • 構(gòu)建Vue大型應(yīng)用的10個最佳實踐(小結(jié))

    構(gòu)建Vue大型應(yīng)用的10個最佳實踐(小結(jié))

    這篇文章主要介紹了構(gòu)建Vue大型應(yīng)用的10個最佳實踐(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • vue項目如何設(shè)置全局字體樣式font-family

    vue項目如何設(shè)置全局字體樣式font-family

    這篇文章主要介紹了vue項目如何設(shè)置全局字體樣式font-family問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue中多個文件下載實現(xiàn)打包壓縮下載示例

    vue中多個文件下載實現(xiàn)打包壓縮下載示例

    這篇文章主要為大家介紹了vue中多個文件下載實現(xiàn)打包壓縮下載的發(fā)發(fā)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • vue將數(shù)字轉(zhuǎn)為中文大寫金額方式

    vue將數(shù)字轉(zhuǎn)為中文大寫金額方式

    這篇文章主要介紹了vue將數(shù)字轉(zhuǎn)為中文大寫金額方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • elementui使用el-upload組件實現(xiàn)自定義上傳的詳細(xì)步驟

    elementui使用el-upload組件實現(xiàn)自定義上傳的詳細(xì)步驟

    upload上傳是前端開發(fā)很常用的一個功能,在Vue開發(fā)中常用的Element組件庫也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下
    2023-12-12
  • 基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題

    基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題

    今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 用Vue寫一個分頁器的示例代碼

    用Vue寫一個分頁器的示例代碼

    本篇文章主要介紹了用Vue寫一個分頁器的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue實現(xiàn)簡單瀑布流布局

    vue實現(xiàn)簡單瀑布流布局

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單瀑布流布局,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • vue3限制table表格選項個數(shù)的解決方法

    vue3限制table表格選項個數(shù)的解決方法

    這篇文章主要為大家詳細(xì)介紹了vue3限制table表格選項個數(shù)的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04

最新評論