1. 程式人生 > >nuxt.js express模板項目服務器部署

nuxt.js express模板項目服務器部署

0.10 補充 pac 服務端 依賴包 數據 每次 參數 ron

nuxt版本:0.10.6

技術棧:nuxt.js, express, pm2

部署環境:windows server

之前用nuxt.js 的express的模板項目在windows下用nginx進行代理訪問,其實有點多余,直接用host文件就可以達到相同的效果,僅供娛樂吧,熟悉一下nginx的基本配置也是好的,其實這段時間研究nuxt.js比較多,主要還是想提高客戶端訪問首頁更快一點。

之前使用nuxt.js generate直接生成對應的html靜態文件,這個不需要服務器安裝什麽特殊的環境。

以iis為例,直接把dist文件夾下生成的文件丟到對應的目錄就可以了,其他的也是一樣拷貝目錄文件,這種方式是客戶端訪問最快的方式,但是生成html靜態文件的過程可能有點痛苦,服務器數據有變化的時候要及時地更新對應的靜態html文件,比如要跑一些增量更新數據的服務,數據更新這一塊的復雜度就上去了。(後續再補充一下nuxt.js 用generate命令生成靜態html的範例)

對於後端數據變化比較頻繁且及時性要求高的應用來說,需要生成靜態html文件很多的情況下,循環生成的方式難以滿足要求,以下是一個nuxt.js在服務端世界掛在node.js的環境運行的方式。

生成模板項目

vue init nuxt/express mynuxtexpress

拷貝mynuxtexpress目錄下的文件夾到服務器上,例如我拷貝到D:\nuxt目錄下

技術分享

服務器上需要安裝node.js,安裝好後,cmd打開D:\nuxt目錄,更新依賴包

npm install

編譯

npm run build

運行

npm run start

瀏覽器輸入http://localhost:3000就可以正常訪問了,但是在服務器上如果關掉了cmd命令行窗口,服務就自動停止了

這裏介紹一個管理node.js應用進程的管理器pm2,安裝也很簡單

npm install -g pm2

然後使用pm2啟動應用

pm2 start ./build/main.js

啟動成功後

技術分享

基本到這裏環境就差不多了,nuxt.js源代碼如果不想放在服務器上,可以刪除除了.nuxt, build, node_modules文件夾和package.json文件的其他文件和文件夾,但是每次發布build和.nuxt兩個文件夾和package.json文件需要進行更新,如有依賴包更新,直接運行更新依賴包命令就可以了

另外默認的服務是host在127.0.0.1本機上,在部分服務器上,如雲服務器使用虛擬ip的服務器上,localhost和127.0.0.1都可以訪問,但是使用內網的ip無法訪問,這也直接導致了服務器外網即使端口開啟了,也沒有辦法訪問站點,需要更改server/index.js的host配置,去掉host參數

技術分享

然後重新編譯運行,發布就可以了。

nuxt.js還在發展階段,很期待即將到來的1.0的版本,其實現在線上的項目已經開始使用了,如果覺得不錯,那麽試一試吧,用得人多了,發展也就更快了!

nuxt.js express模板項目服務器部署