Nginx部署vue項(xiàng)目無法直接訪問其他路徑的問題及解決
問題
Nginx部署vue項(xiàng)目, 無法直接訪問其他路徑的解決方案
原因
Nginx部署vue項(xiàng)目, 無法直接訪問其他路徑的原因是由于 Vue項(xiàng)目是單頁應(yīng)用（SPA），前端路由由JavaScript處理。
Nginx默認(rèn)配置無法直接訪問其他路徑，因?yàn)榉?wù)器會(huì)嘗試查找對應(yīng)路徑的文件而不是返回index.html。需要在Nginx配置中修改路由規(guī)則，將所有路徑請求重定向到index.html。
補(bǔ)充
Vue Router采用了history模式，而Nginx未正確配置重定向規(guī)則。
Vue Router默認(rèn)使用hash模式（URL帶#），但若啟用history模式，需服務(wù)器端支持將所有路徑重定向到index.html，否則刷新或直接訪問非根路徑時(shí)會(huì)出現(xiàn)404。
解決方案
在nginx的配置文件添加下面轉(zhuǎn)發(fā)配置
location / {
try_files $uri $uri/ /index.html;
}
訪問成功
工作原理分析
這段Nginx配置代碼主要用于處理前端單頁應(yīng)用（SPA）的路由問題，核心原理如下：
路徑匹配機(jī)制
location /表示匹配所有根路徑下的請求。當(dāng)用戶訪問任意URL時(shí)（如/about或/contact），Nginx會(huì)按照try_files指令的順序嘗試查找對應(yīng)資源。
文件查找流程
try_files指令按從左到右的順序嘗試以下路徑：
$uri：直接查找與請求URI完全匹配的靜態(tài)文件（如/about.html）$uri/：嘗試將URI作為目錄查找索引文件（如/about/index.html）/index.html：當(dāng)以上都失敗時(shí)，最終返回前端入口文件
SPA路由處理
對于單頁應(yīng)用：
- 直接訪問靜態(tài)資源（如CSS/JS）時(shí)，前兩個(gè)參數(shù)會(huì)匹配到實(shí)際文件
- 訪問前端路由路徑時(shí)，因物理文件不存在，最終會(huì)fallback到
index.html - 前端框架（如React/Vue）接管路由，根據(jù)URL渲染對應(yīng)組件
典型應(yīng)用場景
這種配置常見于：
- 前端框架生成的歷史模式路由
- 需要支持直接URL訪問的SPA應(yīng)用
- 靜態(tài)站點(diǎn)部署時(shí)保持路由完整性
配置示例擴(kuò)展
實(shí)際部署時(shí)通常需要配合其他指令：
location / {
try_files $uri $uri/ /index.html;
expires -1; # 禁用緩存確保最新index.html
}
location /static/ {
expires 1y; # 靜態(tài)資源長期緩存
}
擴(kuò)展知識(shí)點(diǎn)
如何配置Nginx
安裝Nginx
在Ubuntu系統(tǒng)中，可以使用以下命令安裝Nginx：
sudo apt update sudo apt install nginx
安裝完成后，啟動(dòng)Nginx服務(wù)：
sudo systemctl start nginx
檢查Nginx狀態(tài)
確保Nginx運(yùn)行正常：
sudo systemctl status nginx
如果服務(wù)未啟動(dòng)，可以使用以下命令啟用開機(jī)自啟動(dòng)：
sudo systemctl enable nginx
配置Nginx
Nginx的主配置文件通常位于/etc/nginx/nginx.conf。建議在/etc/nginx/sites-available/目錄中為每個(gè)站點(diǎn)創(chuàng)建單獨(dú)的配置文件，并通過符號(hào)鏈接到/etc/nginx/sites-enabled/。
創(chuàng)建一個(gè)新的站點(diǎn)配置文件：
sudo nano /etc/nginx/sites-available/example.com
配置示例（替換example.com為實(shí)際域名或IP地址）：
server {
listen 80;
server_name example.com www.example.com;
root /var/www/example.com/html;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}
啟用配置文件：
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
測試配置
在重啟Nginx前，測試配置是否有語法錯(cuò)誤：
sudo nginx -t
若無錯(cuò)誤，重啟Nginx：
sudo systemctl restart nginx
設(shè)置防火墻
允許HTTP和HTTPS流量：
sudo ufw allow 'Nginx Full'
配置SSL證書（可選）
使用Certbot獲取Let’s Encrypt免費(fèi)SSL證書：
sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d example.com -d www.example.com
證書會(huì)自動(dòng)更新，手動(dòng)測試更新：
sudo certbot renew --dry-run
靜態(tài)文件服務(wù)
確保站點(diǎn)目錄存在并設(shè)置權(quán)限：
sudo mkdir -p /var/www/example.com/html sudo chown -R $USER:$USER /var/www/example.com/html
創(chuàng)建測試頁面：
nano /var/www/example.com/html/index.html
內(nèi)容示例：
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Success!</h1>
</body>
</html>
反向代理配置
將Nginx配置為反向代理（例如指向本地Node.js應(yīng)用）：
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
負(fù)載均衡配置
配置Nginx作為負(fù)載均衡器：
安裝Nginx
在Ubuntu系統(tǒng)中，可以使用以下命令安裝Nginx：
sudo apt update sudo apt install nginx
安裝完成后，啟動(dòng)Nginx服務(wù)：
sudo systemctl start nginx
檢查Nginx狀態(tài)
確保Nginx運(yùn)行正常：
sudo systemctl status nginx
如果服務(wù)未啟動(dòng)，可以使用以下命令啟用開機(jī)自啟動(dòng)：
sudo systemctl enable nginx
配置Nginx
Nginx的主配置文件通常位于/etc/nginx/nginx.conf。建議在/etc/nginx/sites-available/目錄中為每個(gè)站點(diǎn)創(chuàng)建單獨(dú)的配置文件，并通過符號(hào)鏈接到/etc/nginx/sites-enabled/。
創(chuàng)建一個(gè)新的站點(diǎn)配置文件：
sudo nano /etc/nginx/sites-available/example.com
配置示例（替換example.com為實(shí)際域名或IP地址）：
server {
listen 80;
server_name example.com www.example.com;
root /var/www/example.com/html;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}
啟用配置文件：
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
測試配置
在重啟Nginx前，測試配置是否有語法錯(cuò)誤：
sudo nginx -t
若無錯(cuò)誤，重啟Nginx：
sudo systemctl restart nginx
設(shè)置防火墻
允許HTTP和HTTPS流量：
sudo ufw allow 'Nginx Full'
配置SSL證書（可選）
使用Certbot獲取Let’s Encrypt免費(fèi)SSL證書：
sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d example.com -d www.example.com
證書會(huì)自動(dòng)更新，手動(dòng)測試更新：
sudo certbot renew --dry-run
靜態(tài)文件服務(wù)
確保站點(diǎn)目錄存在并設(shè)置權(quán)限：
sudo mkdir -p /var/www/example.com/html sudo chown -R $USER:$USER /var/www/example.com/html
創(chuàng)建測試頁面：
nano /var/www/example.com/html/index.html
內(nèi)容示例：
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Success!</h1>
</body>
</html>
反向代理配置
將Nginx配置為反向代理（例如指向本地Node.js應(yīng)用）：
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
該Nginx配置片段用于將客戶端請求反向代理到本地3000端口服務(wù)，同時(shí)設(shè)置必要的HTTP頭信息。
逐行解析
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
核心指令說明
proxy_pass http://localhost:3000;
將所有匹配根路徑（/）的請求轉(zhuǎn)發(fā)到本地3000端口服務(wù)。適用于Node.js、React開發(fā)服務(wù)器等場景。
proxy_set_header Host $host;
保留原始請求的Host頭信息，避免后端服務(wù)因Host改變出現(xiàn)路由問題。$host變量自動(dòng)獲取客戶端請求的原始主機(jī)名。
proxy_set_header X-Real-IP $remote_addr;
將客戶端真實(shí)IP通過X-Real-IP頭傳遞給后端服務(wù)。$remote_addr變量包含客戶端連接IP地址。
負(fù)載均衡配置
配置Nginx作為負(fù)載均衡器：
upstream backend {
server backend1.example.com;
server backend2.example.com;
}
server {
location / {
proxy_pass http://backend;
}
}
Nginx 配置常見字段及翻譯
以下為 Nginx 主要配置文件（nginx.conf）中常見字段的中英文對照及說明：
# 全局塊配置（Global Block）
user www-data; # 運(yùn)行 Nginx 的用戶和組
worker_processes auto; # 工作進(jìn)程數(shù)（auto 為自動(dòng)分配）
pid /run/nginx.pid; # PID 文件路徑
error_log /var/log/nginx/error.log; # 錯(cuò)誤日志路徑
# Events 塊（連接配置）
events {
worker_connections 1024; # 單個(gè)工作進(jìn)程的最大連接數(shù)
use epoll; # 事件驅(qū)動(dòng)模型（Linux 推薦）
multi_accept on; # 允許同時(shí)接受多個(gè)連接
}
# HTTP 塊（核心配置）
http {
include /etc/nginx/mime.types; # 包含 MIME 類型定義文件
default_type application/octet-stream; # 默認(rèn) MIME 類型
access_log /var/log/nginx/access.log; # 訪問日志路徑
sendfile on; # 啟用高效文件傳輸模式
keepalive_timeout 65; # 長連接超時(shí)時(shí)間（秒）
gzip on; # 開啟 Gzip 壓縮
# Server 塊（虛擬主機(jī)配置）
server {
listen 80; # 監(jiān)聽端口
server_name example.com; # 域名或主機(jī)名
root /var/www/html; # 網(wǎng)站根目錄
index index.html; # 默認(rèn)首頁文件
# Location 塊（路由配置）
location / {
try_files $uri $uri/ =404; # 文件存在性檢查
}
location ~ \.php$ {
fastcgi_pass unix:/run/php/php7.4-fpm.sock; # PHP 處理
include fastcgi_params; # 包含 FastCGI 參數(shù)
}
# 錯(cuò)誤頁面配置
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
}
}
關(guān)鍵字段詳解
全局塊（Global Context）
worker_processes：定義 CPU 核心利用率，通常設(shè)為auto。error_log：錯(cuò)誤日志級(jí)別可設(shè)置為debug,info,warn,error,crit。
HTTP 塊（HTTP Context）
gzip_types：指定壓縮的文件類型，例如text/css application/json。proxy_pass：反向代理時(shí)用于轉(zhuǎn)發(fā)請求到后端服務(wù)（如http://localhost:3000）。
Server 塊（Server Context）
listen：可擴(kuò)展為listen 443 ssl http2啟用 HTTPS。server_name：支持通配符（*.example.com）和正則表達(dá)式。
Location 塊（Location Context）
匹配規(guī)則：
=精確匹配~正則匹配（區(qū)分大小寫）~*正則匹配（不區(qū)分大小寫）^~前綴匹配
高級(jí)配置示例
# SSL 配置
server {
listen 443 ssl;
ssl_certificate /etc/ssl/certs/example.crt;
ssl_certificate_key /etc/ssl/private/example.key;
ssl_protocols TLSv1.2 TLSv1.3;
}
# 負(fù)載均衡
upstream backend {
server backend1.example.com weight=5;
server backend2.example.com;
server backup.example.com backup;
}
server {
location /api {
proxy_pass http://backend;
}
}
注意事項(xiàng)
- 修改配置后需測試語法：
nginx -t
- 重載配置：
nginx -s reload
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
通過Nginx+Tomcat+Redis實(shí)現(xiàn)持久會(huì)話
這篇文章主要介紹了通過Nginx+Tomcat+Redis實(shí)現(xiàn)持久會(huì)話的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11
Nginx實(shí)現(xiàn)三種常見的虛擬主機(jī)配置方法
Nginx 是一款高性能的 Web 服務(wù)器,支持多種虛擬主機(jī)配置方式,能夠根據(jù)域名、IP 或端口區(qū)分不同的站點(diǎn),這種靈活性讓 Nginx 成為搭建多站點(diǎn)服務(wù)的首選工具,本文將帶你一步步實(shí)現(xiàn)三種常見的虛擬主機(jī)配置方法,需要的朋友可以參考下2025-03-03
利用nginx同一端口部署多個(gè)前端的辦法(親測有效版)
在Nginx中配置同一個(gè)端口支持多個(gè)前端應(yīng)用,通?？梢酝ㄟ^不同的路徑（location）來映射不同的前端項(xiàng)目,這篇文章主要介紹了利用nginx同一端口部署多個(gè)前端的相關(guān)資料,需要的朋友可以參考下2026-01-01
nginx基于域名，端口，不同IP的虛擬主機(jī)設(shè)置的實(shí)現(xiàn)
這篇文章主要介紹了nginx基于域名，端口，不同IP的虛擬主機(jī)設(shè)置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
負(fù)載均衡（Load Balancing）成為確保系統(tǒng)高可用和高性能的關(guān)鍵技術(shù),本文將詳細(xì)講解 Nginx 的常見負(fù)載均衡策略,并附帶示例配置與適用場景,需要的小伙伴可以了解下2025-09-09
Nginx配置Vue項(xiàng)目Hash/History模式路由跳轉(zhuǎn)錯(cuò)誤的解決方案
這篇文章主要為大家詳細(xì)介紹了Nginx配置Vue項(xiàng)目Hash/History模式路由跳轉(zhuǎn)錯(cuò)誤的相關(guān)解決方案,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解下2025-09-09
Linux 系統(tǒng) nginx 服務(wù)器安裝及負(fù)載均衡配置詳解
nginx(engine x) 是一個(gè) 高性能 的 HTTP 和 反向代理 服務(wù)器、郵件代理服務(wù)器以及通用的 TCP/UDP 代理服務(wù)器。這篇文章主要介紹了Linux 系統(tǒng) nginx 服務(wù)器安裝及負(fù)載均衡配置詳解,需要的朋友可以參考下2019-07-07
windows下nginx的安裝使用及解決80端口被占用nginx不能啟動(dòng)的問題
這篇文章主要給大家介紹了關(guān)于windows下nginx的安裝使用，以及如何解決80端口被占用導(dǎo)致nginx不能啟動(dòng)的問題，文中介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
使用Nginx實(shí)現(xiàn)301跳轉(zhuǎn)至https的根域名示例代碼
這篇文章主要介紹了使用Nginx實(shí)現(xiàn)301跳轉(zhuǎn)至https的根域名，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
nginx中封禁ip和允許內(nèi)網(wǎng)ip訪問的實(shí)現(xiàn)示例
Nginx不僅僅只是一款反向代理和負(fù)載均衡服務(wù)器，本文主要介紹了nginx中封禁ip和允許內(nèi)網(wǎng)ip訪問的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03