vue-nuxt.js部署到寶塔主機服務器


廢話不多說,直接上步驟,如下:

本文章為在 vue環境下使用了nuxt.js

1、搭建環境--由於本人安裝的是寶塔主機,因此如下:

由於我直接使用的是寶塔主機,直接去“軟件管理”安裝 PM2管理器。 安裝好以后點擊“設置”,找到“模塊管理”,直接安裝需要的模板,我使用的是nuxt,因此我也直接安裝了 nuxt。 (這里安裝有沒有用我目前不太清楚,我只是知道我項目里使用了nuxt,所有我就順便安裝了,時間太忙也就沒深入研究了) 

2、添加站點

站點添加成功后修改站點配置文件,直接在配置文件頂部增加 upstream nodenuxt { server 127.0.0.1:3003; #nuxt項目 監聽端口 keepalive 64; } //以下為之前默認的數據,不用管 server { listen 80; server_name mysite.com; location / { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Nginx-Proxy true; proxy_cache_bypass $http_upgrade; proxy_pass http://nodenuxt; #反向代理 } } 

3、設置反向代理

由於以上配置了 127.0.0.1:3003 因此反向代理的目標URL也為 http://127.0.0.1:3003 發送域名:mysite.com //項目的訪問域名 

4、本地項目下的package.json里設置, 注意:start 使用了3003端

"scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server", "online": "cross-env NODE_ENV=production nuxt start", "build": "nuxt build", "start": "PORT=3003 nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint" }, 

5、項目本地完成后, npm run build 打包應用

打包完成后將以下四個文件上傳到服務器空間 .nuxt //打包生成的文件夾 static //默認靜態文件 nuxt.config.js //nuxt項目配置文件 package.json //配置文件 

6、在服務器上部署運行

1. 使用命令模式:終端或者其他方式鏈接上服務器 2. 自己先測試一下服務器上是否安裝支node npm,檢查一下版本號 node -v npm -v 2. 進入到該項目的根目錄 3. 運行 npm install 安裝package里的依賴 4. 安裝好3以后,再運行 npm start 就可以運行起來nuxt的服務渲染了 如下: > my-nuxt@1.0.0 start /www/wwwroot/mysite.com > PORT=3003 nuxt start 到了這里我們就可以在瀏覽器上輸入 mysite.com 訪問了。服務端渲染瞬間出來了。 #### 別得意,這里還沒完成呢。 ,上面的效果是並不理想的,所以我們需要開啟進程守護來穩定常駐后台 

7、pm2 開啟進程守護

pm2 start npm --name "my-nuxt" -- run start //my-nuxt為我們自定義的項目名稱,也是我們自定義的守護進程名稱 ┌──────────┬────┬─────────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐ │ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching ├──────────┼────┼─────────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤ │ my-nuxt 0 0.33.4 │ fork 23278 │ online 0 0s 0% 15.6 MB │ root │ disabled └──────────┴────┴─────────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────┴──────────┘ 出現了以上的圖案數據,說明守護進程已經開啟了。 

OK,到了這里也就完成了,你可以放心的訪問你的域名。 就可以正常的訪問啦。

以上為我實際操作得出的步驟,如果按照步驟完成還是不能訪問,那就很抱歉沒能幫到你,你也繼續努力....


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM