Willy's Fish教學筆記』

有關於 History Mode 的介紹

官方到是很簡潔的一筆帶過

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

點我看官方教學

由於本人剛好是從新手村出來

也不知道這牛頭不對馬嘴的一筆是要改在哪邊

故寫此文記錄一下

什麼是 History Mode

其實 Router 預設是 Hash Mode

也就是跑起來網址會像這樣 http://yoursite.com/#/user/id

有發現和大部份網頁不同的地方嗎？

沒錯，就是 # 符號

若用了 History Mode 就會變成 

http://yoursite.com/user/id

不過由於我們是 SPA (Single Page Application)

實際上並沒有一個路徑為 /user/id 的頁面

所以會發生 404 找不到頁面的狀況

所以就要在後台做設定

把找不到頁面的 url 都指定到 index.html

也就是我們的 SPA 頁面

那麼，首先

要使用 History Moe 一開始在 Vue Router 要先設定好

const router = new VueRouter({
    mode: 'history',
    routes: [...]
})

之後便要依照後台使用的伺服器 ( Nginx, Apache…等 )去做設定

我們目前是用 Nginx 來做為 server

一開始我不知道要改在哪裡

就找了一下 Nginx 的設定檔

找到了它 /etc/nginx/nginx.conf

改了半天都沒有生效

後來隔天問公司前端高手

才知道 /etc/nginx/sites-available/default 才是真主啊 XD

之後的一切就迎刃而解啦

照著官網與 google 文章所搜的資源試做就完成了

設定範例可以看這

沒錯，這篇的重點就只是 configuration 在哪裡

希望有幫到大家，哈哈哈

資料來源：

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

https://gist.github.com/szarapka/05ba804dfd1c10ad47bf