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 - 本地開發服務器設置代理