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匹配不上路由映射无法渲染页面的问题