寫在前面

Vue-Router 有兩種模式，默認(rèn)是 hash 模式，另外一種是 history 模式。

• hash：也就是地址欄里的 # 符號(hào)。比如 http://www.example/#/hello，hash 的值為 #/hello。特點(diǎn)：hash 雖然出現(xiàn) URL 中，但不會(huì)被包含在 HTTP 請(qǐng)求中，對(duì)后端不會(huì)產(chǎn)生什么影響，改變 URL 不會(huì)重載頁面。
• history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。（需要特定瀏覽器支持）

hash 和 history 兩種模式都是基于瀏覽器自身的屬性，vue-router 只是利用了這兩個(gè)特性（底層還是瀏覽器提供的接口）來實(shí)現(xiàn)前端路由。

使用場景

一般來說，兩種模式都是可以的。除非在意不太漂亮的 #，只能選擇 history。

這兩種模式在開發(fā)環(huán)境下都沒有什么太大的問題，但是當(dāng)部署到生產(chǎn)環(huán)境中后，兩者有所不同。

hash 模式部署沒有什么問題，只要訪問到服務(wù)器上的 index.html，就可以訪問網(wǎng)站了。
history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致，如 http://www.example.com/user/id。如果后端缺少對(duì) /user/id 的路由處理，將返回 404 錯(cuò)誤。

不過這種模式要玩好，還需要后臺(tái)配置支持……所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁面，這個(gè)頁面就是你 app 依賴的頁面。- Vue-Router

問題起因

在做「年度賬單」項(xiàng)目的時(shí)候，項(xiàng)目部署的時(shí)候，用的是 hash 模式。APP安卓端分享出去的鏈接對(duì)于 # 做了特殊處理，encode 轉(zhuǎn)義成了 %23，所以路由只能換成 history 的模式。

因此，現(xiàn)把解決的思路總結(jié)下，雖然 官網(wǎng) 上給出了解決方案，但在實(shí)際的編碼中也遇到了一些問題。

根目錄下

當(dāng)項(xiàng)目在根目錄下部署的時(shí)候（如 http://www.example.com/）,vue 的相關(guān)文件默認(rèn)不需要修改，修改的是后端，這里以 nginx 為例。

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

$uri 就是訪問的 url，不包含 域名 和 querystring。例如 /test/hello 當(dāng)訪問 $uri 時(shí)，如果存在，則訪問 $uri/, 不存在就訪問 /index.html 這樣配置好，訪問 http://example.com/ 時(shí)就可以訪問到網(wǎng)站了，進(jìn)入多級(jí)目錄后刷新頁面也不會(huì)存在問題。

子級(jí)目錄下

這里涉及到修改 vue 項(xiàng)目幾個(gè)配置文件。

先定義幾個(gè)環(huán)境

• 部署的域名：http://www.example.com:8080/
• nginx 的 root 目錄：home/web/
• vue 的部署路徑：home/web/h5-year-bill/
• vue 項(xiàng)目的鏈接：http://www.example/h5-year-bill/
• vue 項(xiàng)目的靜態(tài)資源路徑：http://www.example/h5-year-bill/static/

1. 打包后的靜態(tài)資源路徑需要修改

找到 build/config/index.js，代碼如下：

...
build: {
...
- assetsPublicPath
  // 訪問路徑，修改成絕對(duì)路徑
+ assetsPublicPath: '/h5-year-bill/'
}

2. 路由文件

Vue-Router 有一個(gè) base 屬性, 傳送門

base
類型: string
默認(rèn)值: "/"
應(yīng)用的基路徑。例如，如果整個(gè)單頁應(yīng)用服務(wù)在 /app/ 下，然后 base 就應(yīng)該設(shè)為 "/app/"

因此，找到 src/router/index.js，代碼如下：

// 不影響本地開發(fā)，兼容性做了處理
const isHistoryMode = process.env.NODE_ENV === 'production' ? {
 mode: 'history',
 base: '/h5-year-bill/'
} : {
 mode: 'hash'
};

const router = new Router({
 ...isHistoryMode,
 routes
});

至此，打包配置的相關(guān)修改已全部完成，項(xiàng)目也能夠正常訪問。

但還是會(huì)有一個(gè)問題，跳轉(zhuǎn)到某個(gè)路由后，刷新頁面，就會(huì)出現(xiàn)頁面空白，或者路由不通，此時(shí)就要修改 nginx 的配置了。

3. nginx 配置相關(guān)修改

nginx部署路徑/conf/nginx.conf，修改如下：

#h5-year-bill
location ^~ /h5-year-bill {
 root /home/web;
 index index.html;
 try_files $uri $uri/ /h5-year-bill/index.html last;
}

/h5-year-bill/ 就是部署的網(wǎng)站目錄。

這樣幾項(xiàng)配置后，就可以在子目錄下訪問網(wǎng)站，刷新也沒有問題。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論