Vue.js打包後上傳到網站空間，重新整理會出現404 Not Found

【現象】

Vue.js透過CLI指令”npm run build”產生輸出檔後放到網站空間，任意點擊一頁可以正常瀏覽，但重新整理後會出現404 Not Found。

【解法一】

Vue.js 的SPA並不是伺服器端的render，所以當我們使用一個網址是server端路徑上沒有的時，就不會重新導向index.html。

解決這個問題可以修改.htaccess檔(加入下方程式碼)，讓所有網址都導向index.html：

<ifModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</ifModule>

【解法二】

如果不介意網址會多出”/#/”的話，可以將Vue.js project中的router.js，原本預設的mode: ‘history’改為mode: ‘hash’。

export default new Router({
  mode: 'hash'
})