在 Vue 項目部署中， 子目錄部署是一個非常常見、但也非常容易踩坑的場景，例如：

http://ip:port/wvp/

而不是默認的：

http://ip:port/

這時，Vue Router 的 hash 模式 和 history 模式 在行為上會出現(xiàn)本質(zhì)區(qū)別。

一、先說結(jié)論

在子目錄（如 /wvp/）下部署 Vue 項目：

• ? hash 模式：穩(wěn)定、省心，幾乎不需要后端配合
• ?? history 模式：必須配合后端 / Nginx，否則刷新必 404

如果是內(nèi)部系統(tǒng) / 后臺管理系統(tǒng)，強烈推薦 hash 模式。

二、hash 和 history 的 URL 本質(zhì)區(qū)別

1?? hash 模式

/wvp/#/dashboard

特點：

• # 后面的內(nèi)容 不會發(fā)送給服務(wù)器
• 屬于瀏覽器行為
• 前端路由完全由 Vue 接管

2?? history 模式

/wvp/dashboard

特點：

• 完整路徑會發(fā)送給服務(wù)器
• 服務(wù)器必須知道如何處理這個路徑

三、子目錄 + hash：為什么幾乎不會出問題？

訪問流程解析

當訪問：

http://ip:port/wvp/#/dashboard

瀏覽器與服務(wù)器的交互是：

瀏覽器請求 → /wvp/
服務(wù)器返回 → index.html
Vue Router 解析 → #/dashboard

?? 服務(wù)器永遠只看到 /wvp/

hash 模式的優(yōu)勢

• 刷新頁面不會 404
• 瀏覽器直接訪問任意路由都正常
• 后端 / Nginx 無需任何額外配置

?? 子目錄部署下，hash 模式天生安全

四、子目錄 + history：為什么容易翻車？

訪問流程解析

訪問：

http://ip:port/wvp/dashboard

服務(wù)器接收到的是：

/wvp/dashboard

如果服務(wù)器沒有配置該路徑：

→ 找不到資源
→ 返回 404

? 頁面刷新 404
? 瀏覽器直接訪問 404
? 前進 / 后退偶發(fā) 404

五、history 模式在子目錄下必須做哪些配置？

1?? 前端配置（缺一不可）

// vue.config.js
module.exports = {
  publicPath: '/wvp/'
}

// router/index.js
const router = new VueRouter({
  mode: 'history',
  base: '/wvp/',
  routes
})

2?? Nginx / 后端配置（核心）

Nginx 示例

location /wvp/ {
  try_files $uri $uri/ /wvp/index.html;
}

含義：

• 如果是靜態(tài)資源 → 正常返回
• 如果不是 → 統(tǒng)一返回 index.html
• 由 Vue Router 接管路由

如果沒有這一步會怎樣？

/wvp/dashboard → Nginx找文件 → 找不到 → 404

六、hash vs history：子目錄下的真實對比

七、什么時候才應(yīng)該用 history？

• 對外網(wǎng)站
• 需要 SEO
• 需要分享干凈 URL
• 后端 / Nginx 完全可控

否則：

子目錄部署 + 內(nèi)部系統(tǒng) → hash 是最優(yōu)解

八、推薦配置（子目錄）

// vue.config.js
module.exports = {
  publicPath: '/wvp/'
}

// router/index.js
export default new VueRouter({
  mode: 'hash',
  base: '/wvp/',
  routes
})

? 不依賴后端
? 刷新不炸
? 部署簡單

九、總結(jié)

hash 是“工程優(yōu)先”
history 是“美觀優(yōu)先”

在子目錄部署場景下，穩(wěn)定永遠比好看重要。

到此這篇關(guān)于Vue 項目部署在子目錄下：hash vs history 的真實區(qū)別的文章就介紹到這了,更多相關(guān)vue hash vs history區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論