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//打出轉發日志
  }));