Vue-cli創建項目從單頁面到多頁面2-history模式

之前講過怎樣將vue-cli創建的項目改造成多頁面（vue-cli創建項目從單頁面到多頁面），今天說一下怎樣在多頁面的前提下使用history模式。

如何使用history模式

因為vue默認的hash模式的url有些丑，所以我們可以在路由的配置中添加如下配置：

   import Router from 'vue-router';
   new Router({
     mode: 'history'  // 這樣設置后，就可以去掉url中丑丑的“#”啦
   });

但是如果只是這樣使用的話，在本地開發時，有一個問題，那就是當你訪問其他頁面的時候，只能使用xxx/pagename.html 這種方式訪問，而不是xxx/xxx2/xxx3等方式，直接刷新后，並不能定位到你預期的pagename.html，反而會定位到index.html（因為默認會定位到這里）;

解決方案

在build/dev-sever.js中，我們可以通過connect-history-api-fallback 模塊修改，修改方式如下：
// SPA應用瀏覽器回退支持配置

var rewrites = {
  rewrites: [{
    from: '/home/', // 正則或者字符串
    to: '/home/index.html', // 字符串或者函數
  }]
};
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')(rewrites));

官方使用文檔見github：https://github.com/bripkens/connect-history-api-fallback

我的vue多頁面系列的其他博客鏈接：

Vue-cli創建項目從單頁面到多頁面

Vue-cli創建項目從單頁面到多頁面3-關於將打包后的項目文件不放在根目錄下

Vue-cli創建項目從單頁面到多頁面4 - 本地開發服務器設置代理