看看怎么把一個(gè) Vue 3 項(xiàng)目部署到 Linux 服務(wù)器上。準(zhǔn)備好你的咖啡，讓我們愉快地度過這段部署時(shí)光！

前期準(zhǔn)備

確保你已經(jīng)在本地構(gòu)建了 Vue 3 項(xiàng)目，并生成了 dist 文件夾。

npm run build

構(gòu)建完成后，你將看到一個(gè)新鮮出爐的 dist 文件夾，里面包含所有靜態(tài)資源。

傳輸文件到服務(wù)器

接下來，我們需要將這些文件傳輸?shù)侥愕?Linux 服務(wù)器上。你可以使用 SCP，rsync，或者你喜歡的任何工具。這里我們假設(shè)你使用 SCP：

scp -r dist username@your_server_ip:/path/to/destination/

把 username 換成你的服務(wù)器用戶名，your_server_ip 換成你的服務(wù)器IP，/path/to/destination/ 換成你想要放置文件的位置，比如 /var/www/。

小小友情提醒

別忘了確認(rèn)你有權(quán)限訪問和寫入目標(biāo)目錄！權(quán)限問題可是能把人折騰到抓狂的。

配置 NGINX

文件傳上去了，現(xiàn)在我們來搞定 NGINX 配置。打開或創(chuàng)建 NGINX 配置文件，通常在 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf：

 sudo vim /etc/nginx/nginx.conf

在配置文件中添加以下內(nèi)容，將 your_server_ip_or_domain 和 /path/to/destination/dist 替換成你自己的信息：

server {listen 80;server_name your_server_ip_or_domain;location / {root /path/to/destination/dist;index index.html;try_files $uri $uri/ /index.html;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}
}

替換示例：

• your_server_ip_or_domain 其實(shí)就是你服務(wù)器的IP地址或域名。
• /path/to/destination/dist 是你剛才放置 dist 文件夾的路徑。

重啟 NGINX 服務(wù)

配置文件改好了？好嘞！咱們需要讓NGINX重新加載這些新配置：

sudo nginx -t  # 檢查一下配置文件有沒有寫錯(cuò)別字之類的小毛病
sudo systemctl restart nginx  # 重啟NGINX，讓新配置生效

開放防火墻端口

你可不希望你的項(xiàng)目只能自己瞧瞧吧？讓我們打開80端口，讓世界都能訪問：

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --reload

完美解決

如果你沒有寫錯(cuò)任何一步，打開瀏覽器，輸入你的服務(wù)器IP或域名，噠噠噠，你的 Vue 3 項(xiàng)目現(xiàn)在應(yīng)該愉快地跑在服務(wù)器上了！

總結(jié)

通過這些步驟，你成功將一個(gè) Vue 3 項(xiàng)目部署到了 Linux 服務(wù)器上，并配置了 NGINX——這可是極具成就感的一項(xiàng)成就！快去享受你的成果，向世界展示你的作品吧！

Happy deploying! 🚀