在 Vue 項(xiàng)目部署中， 子目錄部署是一個(gè)非常常見、但也非常容易踩坑的場(chǎng)景，例如：

http://ip:port/wvp/

而不是默認(rèn)的：

http://ip:port/

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

一、先說結(jié)論

在子目錄（如 /wvp/）下部署 Vue 項(xiàng)目：

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

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

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

1?? hash 模式

/wvp/#/dashboard

特點(diǎn)：

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

2?? history 模式

/wvp/dashboard

特點(diǎn)：

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

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

訪問流程解析

當(dāng)訪問：

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

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

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

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

hash 模式的優(yōu)勢(shì)

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

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

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

訪問流程解析

訪問：

http://ip:port/wvp/dashboard

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

/wvp/dashboard

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

→ 找不到資源
→ 返回 404

? 頁(yè)面刷新 404
? 瀏覽器直接訪問 404
? 前進(jìn) / 后退偶發(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 接管路由

如果沒有這一步會(huì)怎樣？

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

六、hash vs history：子目錄下的真實(shí)對(duì)比

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

• 對(duì)外網(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ǎn)單

九、總結(jié)

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

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

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

最新評(píng)論