Vue部署項(xiàng)目到阿里云云服務(wù)器的實(shí)現(xiàn)步驟

更新時(shí)間：2025年12月30日 08:21:56 作者：天吶草莓

本文主要介紹了部署 Vue 項(xiàng)目到阿里云云服務(wù)器,將文件上傳到服務(wù)器,使用Nginx作為Web服務(wù)器提供服務(wù),配置Nginx以支持前端路由,感興趣的可以了解一下

部署 Vue 項(xiàng)目到阿里云云服務(wù)器 (CentOS/Ubuntu 為例)

核心步驟： 在本地構(gòu)建 Vue 項(xiàng)目生成靜態(tài)文件，然后將這些文件上傳到服務(wù)器，并使用 Nginx 作為 Web 服務(wù)器提供服務(wù)。

前提條件：

一臺(tái)運(yùn)行 Linux (如 CentOS 或 Ubuntu) 的阿里云 ECS 實(shí)例。
本地開發(fā)環(huán)境已安裝 Node.js 和 npm/yarn。
本地已安裝 SSH 客戶端 (如 OpenSSH)。
服務(wù)器已安裝 Nginx。
擁有服務(wù)器的 SSH 登錄權(quán)限 (用戶名和密碼或密鑰對(duì))。

詳細(xì)步驟：

1. 本地構(gòu)建 Vue 項(xiàng)目

打開終端，進(jìn)入你的 Vue 項(xiàng)目根目錄。
運(yùn)行構(gòu)建命令生成靜態(tài)文件：
```
npm run build
# 或者使用 yarn
yarn build
```
構(gòu)建完成后，項(xiàng)目目錄下會(huì)生成一個(gè) dist 文件夾。這個(gè)文件夾里包含了所有優(yōu)化壓縮后的 HTML、CSS、JavaScript 和靜態(tài)資源文件。這就是你需要上傳到服務(wù)器的內(nèi)容。

2. 服務(wù)器環(huán)境準(zhǔn)備

登錄服務(wù)器： 使用 SSH 登錄你的阿里云服務(wù)器。

ssh username@your_server_ip
# 如果使用密鑰，可能需要指定密鑰路徑
ssh -i /path/to/your-key.pem username@your_server_ip

安裝 Nginx (如果未安裝)：

Ubuntu:
```
sudo apt update
sudo apt install nginx
```
CentOS:
```
sudo yum update
sudo yum install nginx
```

啟動(dòng)并設(shè)置 Nginx 開機(jī)自啟：

sudo systemctl start nginx
sudo systemctl enable nginx

配置防火墻 (如果啟用)： 確保防火墻允許 HTTP (端口 80) 和 HTTPS (端口 443) 的流量。阿里云安全組也需要在控制臺(tái)開放這些端口。
- Ubuntu (ufw):
```
sudo ufw allow 'Nginx Full' # 允許 HTTP(80) 和 HTTPS(443)
```
- CentOS (firewalld):
```
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload
```

3. 上傳構(gòu)建文件到服務(wù)器

在本地終端 (不是在服務(wù)器上)，使用 scp 命令將 dist 文件夾上傳到服務(wù)器的一個(gè)目錄。選擇一個(gè)合適的目錄，例如 /var/www/your_project_name 或用戶家目錄下的某個(gè)位置。
```
scp -r /path/to/your/local/vue-project/dist username@your_server_ip:/path/to/target/directory/on/server
# 示例： scp -r ./dist user@123.123.123.123:/var/www/my-vue-app
```
- -r: 遞歸復(fù)制整個(gè)目錄。
- 替換 /path/to/your/local/vue-project/dist 為你的本地 dist 文件夾的實(shí)際路徑。
- 替換 username 為你的服務(wù)器用戶名。
- 替換 your_server_ip 為你的服務(wù)器公網(wǎng) IP 地址。
- 替換 /path/to/target/directory/on/server 為你想存放 dist 文件夾內(nèi)容的服務(wù)器目標(biāo)路徑。確保該目錄存在，或者先登錄服務(wù)器創(chuàng)建它 (mkdir -p /path/to/target/directory)。

4. 配置 Nginx

登錄服務(wù)器。
創(chuàng)建一個(gè)新的 Nginx 服務(wù)器塊 (Server Block) 配置文件。通常放在 /etc/nginx/conf.d/ 或 /etc/nginx/sites-available/ (Ubuntu) 并在 sites-enabled/ 創(chuàng)建符號(hào)鏈接。這里以 /etc/nginx/conf.d/ 為例：
```
sudo nano /etc/nginx/conf.d/your_project_name.conf
```

在打開的編輯器中，輸入類似下面的配置：

server {
    listen 80;
    server_name your_domain.com www.your_domain.com; # 替換為你的域名，或者用服務(wù)器IP時(shí)寫 _ (下劃線)
    # server_name _; # 如果沒有域名，使用 IP 訪問，可以用這個(gè)

    root /path/to/your/dist/folder/on/server; # 替換為 dist 文件夾在服務(wù)器上的實(shí)際路徑
    index index.html;

    location / {
        try_files $uri $uri/ /index.html; # 對(duì)于 Vue Router 的 history 模式非常重要
    }

    # 可選：配置錯(cuò)誤頁面
    error_page 404 /index.html;
}

關(guān)鍵點(diǎn)：
- root: 必須指向你上傳的 dist 文件夾的路徑。
- try_files $uri $uri/ /index.html;: 這是處理前端路由 (如 Vue Router 的 history 模式) 的關(guān)鍵。它告訴 Nginx 在找不到文件時(shí)嘗試加載 index.html，由 Vue 應(yīng)用處理路由。
- server_name: 如果你有域名，填域名。如果只用 IP 訪問，可以寫 server_name _;。

保存并退出編輯器 (在 nano 中按 Ctrl + O 保存，Ctrl + X 退出)。
測試 Nginx 配置： 運(yùn)行以下命令檢查配置文件語法是否正確：
```
sudo nginx -t
```
如果輸出顯示 syntax is ok 和 test is successful，則配置正確。
重新加載 Nginx: 讓新的配置生效：
```
sudo systemctl reload nginx
```

5. 訪問你的應(yīng)用

打開瀏覽器。
訪問你的服務(wù)器公網(wǎng) IP 地址 (例如 http://123.123.123.123) 或者你配置的域名 (例如 http://your_domain.com)。
如果一切配置正確，你應(yīng)該能看到部署好的 Vue 應(yīng)用了。

補(bǔ)充說明：

HTTPS (SSL/TLS): 強(qiáng)烈建議在生產(chǎn)環(huán)境中使用 HTTPS。你需要獲取 SSL 證書 (可以從阿里云 SSL 證書服務(wù)購買或使用 Let’s Encrypt 免費(fèi)證書)，并在 Nginx 配置中添加監(jiān)聽 443 端口的 server 塊，配置 ssl_certificate 和 ssl_certificate_key 路徑。配置完成后也需要 sudo nginx -t 和 sudo systemctl reload nginx。
域名綁定： 如果你使用域名，需要在你的域名注冊(cè)商處將域名解析 (A 記錄) 指向你的阿里云服務(wù)器的公網(wǎng) IP 地址。阿里云域名解析在阿里云 DNS 控制臺(tái)操作。
權(quán)限問題： 確保 Nginx 進(jìn)程 (通常是 www-data 或 nginx 用戶) 對(duì)你上傳的 dist 文件夾及其內(nèi)容有讀取權(quán)限。如果遇到 403 Forbidden 錯(cuò)誤，檢查權(quán)限 (ls -l /path/to/dist) 并可能需要修改 (sudo chmod -R 755 /path/to/dist, sudo chown -R nginx:nginx /path/to/dist - 根據(jù)你的 Nginx 用戶調(diào)整)。
路由刷新問題： 如果使用 Vue Router 的 history 模式，并且刷新頁面時(shí)出現(xiàn) 404，一定是 Nginx 配置中缺少或錯(cuò)誤配置了 try_files $uri $uri/ /index.html; 這行。仔細(xì)檢查。