Vue項目部署問題及解決方案
Vue-Router 有兩種模式，默認是 hash 模式，另外一種是 history 模式。
- hash：也就是地址欄里的
#符號。比如http://www.example/#/hello，hash 的值為#/hello。特點：hash 雖然出現 URL 中，但不會被包含在 HTTP 請求中，對后端不會產生什么影響，改變 URL 不會重載頁面。 - history：利用了 HTML5 History Interface 中新增的
pushState()和replaceState()方法，來完成 URL 跳轉而無須重新加載頁面。（需要特定瀏覽器支持）
hash 和 history 兩種模式都是基於瀏覽器自身的屬性，vue-router 只是利用了這兩個特性（底層還是瀏覽器提供的接口）來實現前端路由。
1、使用場景
一般來說，兩種模式都是可以的。除非在意不太漂亮的 #，只能選擇 history。
這兩種模式在開發環境下都沒有什么太大的問題，但是當部署到生產環境中后，兩者有所不同。
hash 模式部署沒有什么問題，只要訪問到服務器上的 index.html，就可以訪問網站了。
history 模式下，前端的 URL 必須和實際向后端發起請求的 URL 一致，如 http://www.example.com/user/id。如果后端缺少對 /user/id 的路由處理，將返回 404 錯誤。
不過這種模式要玩好，還需要后台配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。- Vue-Router
2、問題起因
在做「年度賬單」項目的時候，項目部署的時候，用的是 hash 模式。APP安卓端分享出去的鏈接對於 # 做了特殊處理，encode 轉義成了 %23，所以路由只能換成 history 的模式。因此，現把解決的思路總結下，雖然 官網 上給出了解決方案，但在實際的編碼中也遇到了一些問題。
（1）根目錄下
當項目在根目錄下部署的時候（如 http://www.example.com/）,vue 的相關文件默認不需要修改，修改的是后端，這里以 nginx 為例。
location / { try_files $uri $uri/ /index.html; }
$uri 就是訪問的 url，不包含 域名 和 querystring。例如 /test/hello 當訪問 $uri 時，如果存在，則訪問 $uri/, 不存在就訪問 /index.html 這樣配置好，訪問 http://example.com/ 時就可以訪問到網站了，進入多級目錄后刷新頁面也不會存在問題。
（2）子級目錄下
這里涉及到修改 vue 項目幾個配置文件。先定義幾個環境
- 部署的域名：
http://www.example.com:8080/ - nginx 的 root 目錄：
home/web/ - vue 的部署路徑：
home/web/h5-year-bill/ - vue 項目的鏈接：
http://www.example/h5-year-bill/ - vue 項目的靜態資源路徑：
http://www.example/h5-year-bill/static/
修改1：打包后的靜態資源路徑需要修改
找到 build/config/index.js，代碼如下：
1 ... 2 build: { 3 ... 4 - assetsPublicPath 5 // 訪問路徑，修改成絕對路徑 6 + assetsPublicPath: '/h5-year-bill/' 7 }
修改2：路由文件Vue-Router 有一個 base 屬性, 傳送門
base 類型: string 默認值: "/" 應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"
因此，找到 src/router/index.js，代碼如下：
1 // 不影響本地開發，兼容性做了處理 2 const isHistoryMode = process.env.NODE_ENV === 'production' ? { 3 mode: 'history', 4 base: '/h5-year-bill/' 5 } : { 6 mode: 'hash' 7 }; 8 9 const router = new Router({ 10 ...isHistoryMode, 11 routes 12 });
至此，打包配置的相關修改已全部完成，項目也能夠正常訪問。
但還是會有一個問題，跳轉到某個路由后，刷新頁面，就會出現頁面空白，或者路由不通，此時就要修改 nginx 的配置了。
修改3：nginx 配置相關修改
nginx部署路徑/conf/nginx.conf，修改如下：
1 #h5-year-bill 2 location ^~ /h5-year-bill { 3 root /home/web; 4 index index.html; 5 try_files $uri $uri/ /h5-year-bill/index.html last; 6 }
/h5-year-bill/ 就是部署的網站目錄。
這樣幾項配置后，就可以在子目錄下訪問網站，刷新也沒有問題。