nuxt從開發到部署

2022-08-05 11:33:12 字數 2094 閱讀 8494

經過幾個週六週日的嘗試,終於解決了服務端渲染中的常見問題,也成功說服了公司新專案採用前後端分離的解決方案,當seo不在是問題的時候,或許才是我們搞前端的真正的春天,其中也遇到了一些小坑,nuxt.js官方還是很給力的,提issue後很積極的給予幫助,再次感謝nuxt.js的開發團隊。

第一個攔路虎就是登陸時候的鑑權問題,如何把token儲存到本地。官方使用express-session解決這個問題,但是這樣做後端也需要使用nodejs,而我們公司使用的php。轉念一想或許cookie可以一試,於是我是這樣做的:

// 後臺驗證使用者資訊,並返回token

async function login () = await axiosserver.post(‘/login‘, req.body)

return data

} login().then(function (data) = data

if (token) )

}// 原封不動返回

return res.json(data)

})})我把登入請求用nodejs做了一次**,把使用者提交的資料傳給後端,後端返回的token設定到cookie裡,然後把資料返會給前端,前端再用vuex儲存token狀態,這樣token同時存在於cookie和記憶體裡,重新整理頁面也是正常的

前端儲存token:

async nuxtserverinit (, ) 

},// set_user

set_user (state, token) ,

於是這個問題就這樣解決了,所有需要儲存到本地的資料都可以這樣做來解決

另一個小問題是components裡資料如何渲染。在nuxt.js中只有page裡的元件有fetchasyncdata方法,所以當我們使用layout佈局頁面時如果元件需要請求資料,就無法渲染了,解決方法是在nuxtserverinit方法裡初始化元件內的資料,如下:

async nuxtserverinit (, )
這樣元件內的資料也可渲染成功了

nuxt.js的plugins設計的個人感覺還是很人性化的,用起來簡直是不能再簡單。在plugins新建一個filters.js,過濾器可以這樣玩:

import vue from ‘vue‘

// 時間格式化

export function formatdate (date, fmt)

let o =

for (let k in o) )`).test(fmt))

} return fmt

}let filters =

object.keys(filters).foreach(key => )

export default filters

然後在nuxt.config.js中註冊一下:

plugins: [

‘~plugins/filters.js‘

]

}

還有很過好玩的就不說了,文章太長了估計都不想看了

大概在8月份時候,寫了幾篇關於如何部署nodejs專案的文章:

nodejs伺服器部署教程一

nodejs伺服器部署教程二,把vue專案部署到線上

nodejs伺服器部署教程三,部署基於node+vue+mongodb的專案

nodejs伺服器部署教程四,部署ssl證書,升級為https

隨著時間推移,修復了一些錯誤,發現了一些錯誤,整體寫的太亂。於是抽了一天時間,在新的伺服器上一邊實踐一邊記錄,把上面幾篇文章用gitbook彙總了一下

不放個demo就走顯得就不厚道了,基於nuxt.js的開源專案確實不太多,以下是我耗時一個月業餘時間做的小專案,之前是基於vuejs開發的,現在用nuxt.js進行了重構,解決了服務端渲染的常見問題

github

gitbook

nuxt.js服務端渲染實踐,從開發到部署

標籤:archive

基於replace

matstat

each

存在date()

nuxt部署在Linux下,ip 埠無法訪問到

使用的是阿里的centos7系統,沒使用nginx進行反向 ,事實上我 了也不能訪問成功,因為部署了安全證書監聽了80埠,然後443埠對應的服務配置下可以反向 成功,其它方式都不行。解決方法竟然是要在nuxt專案下的package json新增如下配置就可以了 config 重新打包專案上傳到服...

nuxt專案部署對靜態頁重編譯問題

1 在nuxt專案根目錄下建立server js 2 安裝chalk npm install chalk server js const http require http const chalk require chalk const oneprocess require child proces...