Vue項目怎樣打包並部署在WindowsServer服務器通過IP訪問

場景

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

來進行訪問服務器上的項目