首先,簡單介紹一下, nuxt.js 是什么

Nuxt.js 是一個 Vue.js的SSR通用框架，最常用的就是用來作SSR(服務器端渲染)。

首先說下 SSR，最近很熱的詞，意為 Server Side Rendering(服務端渲染)，目的是為了解決單頁面應用的 SEO 優化 的問題，對于普通的一般網站影響不大，但是對于論壇類，內容類網站來說是致命的，在國內, 百度/搜狗/等等的搜索引擎無法抓取頁面相關內容，也就是用戶搜不到此網站的相關信息(谷歌可以抓取vue等框架信息)。這也就是我們使用 nuxt.js 的主要原因,

目前常見的SSR開源框架(方式)有三個:

今天我們主要講講目前最成熟, 文檔最詳細, 擁有大量問題解決方案的nuxt.js

nuxt.js 優點:

基于 Vue.js

自動代碼分層

服務端渲染

強大的路由功能，支持異步數據

靜態文件服務

ES6/ES7 語法支持

打包和壓縮 JS 和 CSS

HTML頭部標簽管理

本地開發支持熱加載

集成ESLint

支持各種樣式預處理器： SASS、LESS、 Stylus等

1.安裝與初始化

腳手架安裝成功后,?yarn create nuxt-app 創建一個項目,

之后開始選擇配置:

選擇完成后自動開始安裝!

🎉 Successfully created project nuxt.js

To get started:

cd nuxt.js

yarn dev

To build & start for production:

cd nuxt.js

yarn build

yarn start

? Done in 175.37s.

1

2

3

4

5

6

7

8

9

🎉Successfullycreatedprojectnuxt.js

Togetstarted:

cdnuxt.js

yarndev

Tobuild&startforproduction:

cdnuxt.js

yarnbuild

yarnstart

?Donein175.37s.

2.啟動項目

根據上述提示啟動即可!

3. 打包編譯,?怎么把項目部署到服務器

首先我們build之后, 拷貝

.nuxt

nuxt.config.js

package.json

這三個文件到服務器即可

拷貝到服務器后, 首先安裝依賴, cnpm install

安裝成功后, 執行 npm run start

如果沒有錯誤, 會啟動項目, 和本地啟動一樣, 其實這樣我們就可以訪問了,

開啟 liunx 服務器的內外防火墻端口 , 然后瀏覽器直接訪問: 你的 ip:端口號

4. 配置域名訪問

當然只能帶端口訪問肯定不是我們想要的結果, 那么我們就需要配置 域名, 域名解析到服務端這些流程就不說了,

我們找到nginx的配置文件, 在?http{}模塊里面新增:

upstream vrserver {

server 0.0.0.0:3356;

}

1

2

3

upstreamvrserver{

server0.0.0.0:3356;

}

其中ip地址寫: 0.0.0.0:端口號

之后再新建一組 server{} ;正常nginx配置就不描述了,

比如我要配置成功: http:xxxx.com/v2/ 作為訪問地址, 那就在 xxx.com的nginx 里面新建

location /v2/ {

proxy_pass http://vrserver;

proxy_set_header Origin '';

index index.html index.htm;

}

1

2

3

4

5

location/v2/{

proxy_passhttp://vrserver;

proxy_set_headerOrigin'';

indexindex.htmlindex.htm;

}

新建成功后, 重啟nginx, 然后訪問?http:xxxx.com/v2/ 就可以訪問到我們的服務了

5. 怎么讓我們的 nuxt.js服務一直啟動

現在如果我們關閉終端, 那服務就關閉了, 接下來我們安裝 pm2, 讓服務在后臺一直運行

然后新建一個 pm2.config.json

{

"apps": {

"name": "vr-sever",

"script": "npm run start",

"ignore_watch": [

"node_modules"

]

}

}

1

2

3

4

5

6

7

8

9

{

"apps":{

"name":"vr-sever",

"script":"npm run start",

"ignore_watch":[

"node_modules"

]

}

}

簡單配置即可, 然后我們啟動:?pm2 start pm2.config.json

6 其他問題

如何配置https

如果讓代碼修改后自動重啟

7.項目體驗

目前芊云全景使用的是 nuxt.js 的服務, 具體體驗請瀏覽:??https://vr.he29.com/v3/

總結

以上是生活随笔為你收集整理的服务器ssr进程启动怎么运行,要SSR? NUXT项目从初始化到部署服务器流程全记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。