vue-router history模式下，子路由以及刷新頁面not found問題解決

以前一直用的都是hash模式，最近的項目是導師寫好的前端，我來搞後端，由於她弄的是history模式，本地調試沒問題，打包後啓動服務器就會遇到子頁面刷新後not found，以及多級路由也not found的狀況。

由於vue的路由是在瀏覽器中進行管理，若是刷新http://localhost:3011/時能夠訪問到的，由於請求/路徑，node將其指向了index.html(由於webpack打包會把index.html打包到根目錄，而koa-webpack在沒有傳遞參數的狀況下也是指向的webpack配置文件中output中的publicPath，配置文件中配置的是/，因此默認/請求指向index.html),如下是koa-webpack中默認配置的源代碼

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1210894-bb4f6395ba003114.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240z

而/example1請求到node，node會去尋找node端的路由處理，由於node端沒有配置這個路由，全部找不到。

若是想要訪問到/example1，須要請求到index.html,而後由vue的路由處理找到對應的模塊

查了一圈，解決方法有兩個（親測均可以） 參考https://www.jianshu.com/p/c6859a6d4e7e 的文章解決了問題，感謝！（如下爲轉載內容）

• 改爲hash模式

　　　這個不詳細說了，你們都懂，可是由於這個項目對路由形式有點要求，並且涉及到路由傳參，hash就有點麻煩，因此找了第二種方法。

• 將全部html請求轉到index.html 而後讓vue的瀏覽器處理

  1.2 配置node端

  1.將全部的html請求轉到index.html,有一個現成的插件connect-history-api-fallback替咱們作了這件事，可是須要稍微封裝一下才能在koa2中使用。
  （1）npm install connect-history-api-fallback --save 下載插件包
  （2）在根目錄下添加middleware文件夾，用於存放koa的中間件
  （3）在middleware文件夾中添加koa2-connect-history-api-fallback.js 文件，koa2中間件須要傳入須要的方法，因此封裝返回了一個方法

     const history = require('connect-history-api-fallback');
      module.exports = options=> {
          const middleware = history(options);
          const noop = ()  => {
          };
  
          return async (ctx, next)=> {
            middleware(ctx, null, noop);
          await next();
          };
      };

   

  2.在app.js添加

  
  注意：app.use(history(...))要寫在app.use(middleware({...}))以前，否則koa-webpack已經返回not found了，app.use(history(...))就不會生效了

  11.寫好以後重啓服務，而後訪問瀏覽器刷新http://localhost:3011/example1就能夠訪問到了
  而且能夠看到日誌，只有請求html轉到了index.html

  ！！！！注意：app.use(history(...))要寫在全部中間件以前！！！！

  const history = require('./middleware/koa2-connect-history-api-fallback');和
  app.use(history({
  verbose: true//打出轉發日誌
  }));