Vue專案怎樣打包並部署在WindowsServer伺服器通過IP訪問
阿新 • • 發佈:2020-07-14
場景
Vue本地執行build之後開啟dist目錄下index.html正常訪問:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107332730
上面講的將vue專案打包後在本地執行的流程與在伺服器上部署基本相似。
注:
部落格:
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
首先執行vue專案打包
npm run build
打包成功後
會在專案目錄下生成dist目錄。此目錄就是打包之後的目錄。
然後在dist目錄下新建server.js
var express = require('express'); var app = express(); const hostname = '12.12.12.12'; const port = 8080; app.use(express.static('./')); app.listen(port, hostname, () => { console.log(`Server is running `); });
注意要把這裡的hostname改為要部署的伺服器的ip,這裡的12.12.12.12是隨便填寫。
切記要修改為自己伺服器的ip。
這裡也不能用localhost。
然後登入到Windows Server 伺服器上,找一個磁碟目錄。將整個dist目錄複製到伺服器上。
注意這裡新建server.js的目的是為例使用node的express作為伺服器去啟動專案。
如果不想用express還可以使用tomcat、nginx、IIS等。
這裡以使用express為例。
首先需要在伺服器上安裝node。
然後在伺服器上的dist目錄下開啟命令列,使用npm 安裝express
npm install express
安裝express成功後啟動服務
node server
注意這裡啟動的ip為localhost,正常應該是你在server.js中設定的ip。這裡只是為了演示用。
然後在確保你伺服器的防火牆和8080埠沒有問題後就可以在瀏覽器中通過
http://你的IP:8080/index.html
來進行訪問伺服器上的專案