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//打出转发日志
    }));
posted @ 2019-07-19 10:58  闲敲棋子  阅读(8777)  评论(0编辑  收藏  举报