打包發(fā)布Vue項目需要借助Nginx，Nginx是一款高性能的HTTP和反向代理服務(wù)器，可以用于靜態(tài)資源的部署和負載均衡。本文將介紹如何使用Nginx來部署Vue項目。

第一步，我們需要在本地進行Vue項目的打包。在Vue項目根目錄下，執(zhí)行npm run build命令，可以生成一個dist目錄，里面包含了HTML頁面和打包后的靜態(tài)資源。我們需要將dist目錄里的文件部署到服務(wù)器上。

// 執(zhí)行打包命令
npm run build

第二步，我們需要在服務(wù)器上安裝Nginx。以Ubuntu為例，執(zhí)行以下命令：

// 更新軟件源
sudo apt-get update
// 安裝Nginx
sudo apt-get install nginx

安裝完畢后，我們可以啟動Nginx服務(wù)，執(zhí)行以下命令：

// 啟動Nginx服務(wù)
sudo systemctl start nginx
// 查看Nginx狀態(tài)
sudo systemctl status nginx

第三步，我們需要配置Nginx，指定靜態(tài)資源的路徑和端口號。

// 修改Nginx配置文件
sudo vi /etc/nginx/sites-available/default
// 在server中添加以下內(nèi)容
server {
listen 80;
server_name example.com;
root /path/to/dist;
location / {
try_files $uri $uri/ /index.html;
}
}
// 重啟Nginx服務(wù)
sudo systemctl restart nginx

在以上配置中，我們指定了服務(wù)監(jiān)聽的端口號為80，服務(wù)器名稱為example.com，靜態(tài)資源所在目錄為dist，指定了路由重定向規(guī)則。

第四步，我們需要在防火墻中開放Nginx服務(wù)的端口號。以Ubuntu為例，執(zhí)行以下命令：

// 查看防火墻狀態(tài)
sudo ufw status verbose
// 開放80端口
sudo ufw allow 80/tcp

到這里，我們就完成了Vue項目在Nginx服務(wù)中的部署。在瀏覽器中訪問我們的服務(wù)器地址，即可看到Vue項目已經(jīng)成功上線。