場(chǎng)景

Vue本地執(zhí)行build之后打開dist目錄下index.html正常訪問：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107332730

上面講的將vue項(xiàng)目打包后在本地運(yùn)行的流程與在服務(wù)器上部署基本相似。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

首先執(zhí)行vue項(xiàng)目打包

npm run build

?

打包成功后

?

會(huì)在項(xiàng)目目錄下生成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改為要部署的服務(wù)器的ip,這里的12.12.12.12是隨便填寫。

切記要修改為自己服務(wù)器的ip。

這里也不能用localhost。

然后登錄到Windows Server 服務(wù)器上，找一個(gè)磁盤目錄。將整個(gè)dist目錄復(fù)制到服務(wù)器上。

注意這里新建server.js的目的是為例使用node的express作為服務(wù)器去啟動(dòng)項(xiàng)目。

如果不想用express還可以使用tomcat、nginx、IIS等。

這里以使用express為例。

首先需要在服務(wù)器上安裝node。

然后在服務(wù)器上的dist目錄下打開命令行，使用npm 安裝express

npm install express

?

安裝express成功后啟動(dòng)服務(wù)

node server

?

注意這里啟動(dòng)的ip為localhost，正常應(yīng)該是你在server.js中設(shè)置的ip。這里只是為了演示用。

然后在確保你服務(wù)器的防火墻和8080端口沒有問題后就可以在瀏覽器中通過

http://你的IP:8080/index.html

來進(jìn)行訪問服務(wù)器上的項(xiàng)目

?

總結(jié)

以上是生活随笔為你收集整理的Vue项目怎样打包并部署在WindowsServer服务器通过IP访问的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。