Ubuntu系統(tǒng)下部署Vue/Vite應(yīng)用到Nginx完整步驟
更新時(shí)間：2026年02月27日 09:41:43 作者：衫水
這篇文章主要介紹了Ubuntu系統(tǒng)下部署Vue/Vite應(yīng)用到Nginx的相關(guān)資料,包括配置加載優(yōu)先級(jí)、部署前準(zhǔn)備工作、Nginx配置方案、文件部署與權(quán)限設(shè)置、訪問(wèn)方式、故障排查、快速命令匯總和部署流程圖,需要的朋友可以參考下
一、核心概念與文件結(jié)構(gòu)
1. Nginx 配置加載優(yōu)先級(jí)
主配置文件： /etc/nginx/nginx.conf
虛擬主機(jī)配置： /etc/nginx/sites-enabled/*（通過(guò)軟鏈接加載 sites-available 里的文件）
關(guān)鍵原則：
sites-available目錄只是文件存放地，不會(huì)自動(dòng)加載sites-enabled目錄里的軟鏈接才是真正被 Nginx 加載的配置- 如果在
nginx.conf主文件里已經(jīng)定義了server { listen 80; server_name IP; }，它會(huì)優(yōu)先于sites-enabled里的配置匹配 - 修改配置后必須執(zhí)行
sudo nginx -s reload才能生效
二、部署前準(zhǔn)備工作
1. 環(huán)境變量配置
編輯 .env.production 文件：
# 子應(yīng)用模式（推薦，共用端口） VITE_APP_BASE_API = '/flux/server' # 獨(dú)立域名模式（需要新域名） # VITE_APP_BASE_API = '/server'
2. 構(gòu)建項(xiàng)目
npm run build:prod # 生成 dist/ 目錄
三、Nginx 配置方案（二選一）
方案 A：在/etc/nginx/nginx.conf主文件中添加（推薦，更可靠）
適用場(chǎng)景： 當(dāng)你執(zhí)行 sudo nginx -t 看到 the configuration file /etc/nginx/nginx.conf 時(shí)
操作步驟：
- 備份主配置文件
sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.backup
# ==========================================
# 全局配置段
# ==========================================
user www-data; # Nginx 工作進(jìn)程運(yùn)行用戶
worker_processes auto; # 自動(dòng)根據(jù) CPU 核數(shù)啟動(dòng)進(jìn)程
pid /run/nginx.pid; # 主進(jìn)程 PID 文件
error_log /var/log/nginx/error.log; # 全局錯(cuò)誤日志
include /etc/nginx/modules-enabled/*.conf; # 加載動(dòng)態(tài)模塊
events {
worker_connections 768; # 每個(gè) worker 最大連接數(shù)
}
# ==========================================
# HTTP 配置段
# ==========================================
http {
# 基礎(chǔ)性能優(yōu)化
sendfile on; # 開(kāi)啟零拷貝文件傳輸
tcp_nopush on; # 減少網(wǎng)絡(luò)報(bào)文段數(shù)量
types_hash_max_size 2048; # MIME 類型哈希表大小
# MIME 類型配置
include /etc/nginx/mime.types;
default_type application/octet-stream;
# SSL 協(xié)議配置（僅為預(yù)留，當(dāng)前 server 塊未啟用 443）
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
# 日志配置
access_log /var/log/nginx/access.log;
# Gzip 壓縮
gzip on;
# 引入其他配置文件（通常為空）
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
# ==========================================
# 核心：主應(yīng)用 + Flux 子應(yīng)用虛擬主機(jī)
# ==========================================
server {
listen 80; # 僅監(jiān)聽(tīng) IPv4 的 80 端口（HTTP）
server_name 10.8.100.102; # 精確匹配服務(wù)器 IP 地址
# LASA_Data_Hub 主應(yīng)用配置
root /home/lasahub/LASA_Data_Hub_v1/frontend/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html; # 支持前端路由 history 模式
}
location /api/ {
proxy_pass http://localhost:8899/api/; # 主應(yīng)用后端代理
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# Flux 子應(yīng)用配置（關(guān)鍵部分）
location /flux {
alias /var/www/flux-frontend/dist; # Flux 前端打包文件路徑
try_files $uri $uri/ /flux/index.html; # 必須包含子路徑 /flux
}
location /flux/server {
proxy_pass http://localhost:9099/api/; # Flux 后端 API 代理
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
}
- 編輯主文件
sudo nano /etc/nginx/nginx.conf
- 找到
server_name 你的IP;所在的server { listen 80; ... }塊，在其內(nèi)部追加：
# ============= 新增 Flux 子應(yīng)用配置 =============
location /flux {
alias /var/www/flux-frontend/dist; # 注意：用 alias，末尾不加 /
try_files $uri $uri/ /flux/index.html; # 注意：必須以 /flux 開(kāi)頭
}
location /flux/server {
proxy_pass http://127.0.0.1:9099; # 注意：末尾不加空格和 /
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# ============= 新增結(jié)束 =============
- 測(cè)試并 reload
sudo nginx -t # 必須看到 "test is successful" sudo nginx -s reload
方案 B：在sites-enabled/default中添加
適用場(chǎng)景： 主文件里沒(méi)有 server_name IP; 這種具體 server 塊時(shí)
操作步驟：
- 確認(rèn)軟鏈接存在
ls -l /etc/nginx/sites-enabled/ # 應(yīng)該看到：default -> /etc/nginx/sites-available/default
如果沒(méi)有，創(chuàng)建鏈接：
sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/
- 編輯 default 文件
sudo nano /etc/nginx/sites-available/default
在
server { listen 443 ssl ... }塊內(nèi)追加相同的location /flux {...}配置測(cè)試并 reload
sudo nginx -t sudo nginx -s reload
四、文件部署與權(quán)限設(shè)置
1. 創(chuàng)建目錄并復(fù)制文件
# 創(chuàng)建目標(biāo)目錄 sudo mkdir -p /var/www/flux-frontend/dist # 復(fù)制打包后的文件（在項(xiàng)目根目錄執(zhí)行） cp -r dist/* /var/www/flux-frontend/dist/ # 如果提示權(quán)限不足，在前面加 sudo sudo cp -r dist/* /var/www/flux-frontend/dist/
2. 設(shè)置所有權(quán)和權(quán)限（必須執(zhí)行）
# 把文件所有者改為 Nginx 進(jìn)程用戶（通常是 www-data） sudo chown -R www-data:www-data /var/www/flux-frontend/dist # 設(shè)置權(quán)限：所有者可讀寫執(zhí)行，其他人只讀執(zhí)行 sudo chmod -R 755 /var/www/flux-frontend/dist
驗(yàn)證：
ls -ld /var/www/flux-frontend/dist # 應(yīng)顯示：drwxr-xr-x www-data www-data /var/www/flux-frontend/dist ls -l /var/www/flux-frontend/dist/index.html # 應(yīng)顯示：-rw-r--r-- www-data www-data index.html
五、訪問(wèn)方式
子應(yīng)用模式（本方案）
http://<服務(wù)器IP>/flux https://<服務(wù)器IP>/flux （如果主文件里有 HTTPS 配置）
注意：
- 瀏覽器會(huì)提示證書不安全（因?yàn)樽C書是域名的，不是 IP 的），點(diǎn)擊“繼續(xù)訪問(wèn)”即可測(cè)試
- 等域名
lasahub.inventec.com批下來(lái)后，直接用域名訪問(wèn)，證書警告會(huì)消失
獨(dú)立域名模式（需要額外配置 DNS）
https://flux.lasahub.inventec.com
六、故障排查速查表
問(wèn)題 1：訪問(wèn)/flux報(bào) 404 Not Found
排查步驟：
- 檢查文件是否存在
sudo ls -l /var/www/flux-frontend/dist/index.html
- 如果報(bào)錯(cuò)
No such file or directory→ 文件沒(méi)拷進(jìn)去，重新執(zhí)行cp命令
- 檢查 Nginx 權(quán)限
sudo chown -R www-data:www-data /var/www/flux-frontend/dist sudo nginx -s reload
- 看實(shí)時(shí)錯(cuò)誤日志（最關(guān)鍵）
sudo tail -f /var/log/nginx/error.log
- 然后瀏覽器刷新
/flux，看日志里具體報(bào)什么路徑找不到 - 如果顯示
/var/www/flux-frontend/distflux/index.html→try_files寫錯(cuò)了，必須/flux/index.html
- 檢查 Nginx 配置是否已加載
sudo nginx -T | grep "/flux" # 必須能看到 location /flux 和 location /flux/server 的內(nèi)容
問(wèn)題 2：修改配置后沒(méi)生效
原因： 沒(méi) reload 或改錯(cuò)了文件
解決：
# 確認(rèn)修改的是哪個(gè)文件 sudo nginx -t # 必須 reload sudo nginx -s reload # 如果 reload 沒(méi)效果，檢查進(jìn)程 ps aux | grep nginx # 如果有多個(gè) master 進(jìn)程，說(shuō)明有舊的 Nginx 沒(méi)關(guān)閉，需要重啟 sudo systemctl restart nginx
問(wèn)題 3：權(quán)限不足無(wú)法編輯文件
正確做法：
# 不要改文件所有者！用 sudo 編輯 sudo nano /etc/nginx/nginx.conf
錯(cuò)誤做法：
# 極其危險(xiǎn)，不要這樣做 chmod 777 /etc/nginx/nginx.conf chown your-user /etc/nginx/...
七、快速命令匯總
# 1. 查看 Nginx 加載哪個(gè)配置文件 sudo nginx -t # 2. 測(cè)試配置語(yǔ)法 sudo nginx -t # 3. 重載配置（修改后必須執(zhí)行） sudo nginx -s reload # 4. 重啟 Nginx（當(dāng) reload 無(wú)效時(shí)） sudo systemctl restart nginx # 5. 查看錯(cuò)誤日志 sudo tail -f /var/log/nginx/error.log # 6. 查看訪問(wèn)日志 sudo tail -f /var/log/nginx/access.log # 7. 檢查端口監(jiān)聽(tīng) sudo netstat -tuln | grep nginx # 8. 清理 dist 目錄（重新部署前） sudo rm -rf /var/www/flux-frontend/dist
八、部署流程圖
九、關(guān)鍵注意事項(xiàng)總結(jié)
- server_name 不重要時(shí) ：用
_或IP都能匹配，關(guān)鍵是listen端口 - alias vs root：
alias用于子路徑，root用于根域名 - try_files 路徑 ：必須以子路徑開(kāi)頭，如
/flux/index.html - proxy_pass 格式：末尾不要加
/和空格 - 權(quán)限：每次復(fù)制文件后都必須
chown和chmod - 重載：每次修改 Nginx 配置后必須
sudo nginx -s reload - 測(cè)試：
sudo nginx -t能發(fā)現(xiàn) 90% 的語(yǔ)法錯(cuò)誤
最終驗(yàn)證命令（按順序執(zhí)行一次）：
sudo nginx -t sudo nginx -s reload ls -l /var/www/flux-frontend/dist/index.html sudo chown -R www-data:www-data /var/www/flux-frontend/dist # 瀏覽器訪問(wèn)：http://<你的IP>/flux
總結(jié)
到此這篇關(guān)于Ubuntu系統(tǒng)下部署Vue/Vite應(yīng)用到Nginx的文章就介紹到這了,更多相關(guān)Vue/Vite部署到Nginx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能
本文章主要來(lái)介紹一下第一個(gè)階段，也就是前端校驗(yàn)的驗(yàn)證碼的實(shí)現(xiàn)，下面來(lái)介紹一下拖動(dòng)驗(yàn)證碼的具體實(shí)現(xiàn)。這篇文章主要介紹了利用 Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼,需要的朋友可以參考下2019-06-06
require是node中的一個(gè)方法,他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件,這篇文章主要介紹了vue中的require使用,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue+elementUI配置表格的列顯示與隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue?axios中的get請(qǐng)求方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Element-UI 解決el-table中圖片懸浮被遮擋問(wèn)題小結(jié)
在開(kāi)發(fā)中,發(fā)現(xiàn)element-ui在el-table中添加圖片懸浮顯示時(shí),會(huì)被單元格遮擋的問(wèn)題,對(duì)于此問(wèn)題解決其實(shí)也并不難,將懸浮圖片放在body節(jié)點(diǎn)下,通過(guò)定位顯示即可,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷備忘錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要來(lái)和大家一起探討一下在Vue3項(xiàng)目中如何處理重復(fù)渲染代碼的問(wèn)題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
在計(jì)算字符數(shù)時(shí),一般情況下,英文字符、數(shù)字和大部分符號(hào)都可以被視為占一個(gè)字符長(zhǎng)度,因?yàn)樗鼈兪菃蝹€(gè)字節(jié),然而,對(duì)于某些特殊字符,如表情符號(hào)和部分非英文字符,會(huì)被認(rèn)為占據(jù)了多個(gè)字符長(zhǎng)度,本文給介紹了vue處理emoji表情占位符的操作方法,需要的朋友可以參考下2024-06-06
本篇文章主要介紹了Vee-Validate的使用方法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue3+Uniapp實(shí)現(xiàn)環(huán)境多語(yǔ)言方案完整介紹
本文主要介紹了Vue3 Uniapp環(huán)境下的多語(yǔ)言實(shí)現(xiàn)方案,核心思路是通過(guò)人為翻譯后將內(nèi)容存儲(chǔ)在 JSON 文件中,當(dāng)用戶選擇語(yǔ)言時(shí)調(diào)用對(duì)應(yīng)文件實(shí)現(xiàn)多語(yǔ)言切換,需要的小伙伴可以了解下2025-08-08