vue-router history模式devserver404问题解析

history模式下浏览器输入路由页面链接404问题

浏览器输入如下URL:

1、输入不带路由链接,http://localhost:19001/connect-widget/ ,默认查找 http://localhost:19001/connect-widget/index.html 返回正常

2、输入带路由的链接,http://localhost:19001/connect-widget/xxx,xxx为前端路由,默认查找 http://localhost:19001/connect-widget/xxx/index.html 无此资源返回404

本地开发环境devserver解决

以下配置基于vue-cli3,参考:webpack 官方中文文档

historyApiFallback: {

      rewrites: [

        { from: /\/connect-widget/, to: '/index.html' },

      ]

    }

简单解析:基于http://localhost:19001/connect-widget/xxx 的请求都会被指向 http://localhost:19001/connect-widget/index.html,xxx为前端路由。

因此解决了手动输入带路由链接404问题

vue-router 配置注意事项,base 要与工程publicPath一致,否则会导致vue-router匹配不上路由映射无法渲染页面的问题

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。