【内推字节】欢迎简历chengxinsong@bytedance.com
koa2后端,vue路由使用history模式,开发环境刷新就404
发布于 作者 superadmin 1017 次浏览 来自 分享

vue使用router的history刷新出现404,如果是线上环境,我们一般会使用nginx进行反向代理

一、线上环境

  server {
        listen       8888;#默认端口是80,如果端口没被占用可以不用修改
        server_name  localhost;
        root        E:/vue/my_project/dist;#vue项目的打包后的dist
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }


二、本地开发环境

但是在开发环境下,总不能本地再去启动一个nginx服务吧,所以

然后在官方文档https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90上看到了,有说到:

不过history模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

给出了后端配置栗子:可以仔细看看。

我本地是koa2后端服务,使用koa2-connect-history-api-fallback组件。

//适配vue history的中间件
const historyApiFallback = require('koa2-connect-history-api-fallback');
// handle fallback for HTML5 history API
app.use(historyApiFallback({ whiteList: ['/api'] }));


发布评论
微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!