页面404
刚用vue开发项目没多久,很多时间都在坑里慢慢摸索,今天要填的坑是在vue-router开启history模式后,直接进入路由子目录,页面会报404。为什么呢,原因很简单。因为这个路由子目录在服务器上根本不存在,直接进去,浏览器当然404了。
方案
所以需要后端配合,在服务器上配置一下,如果浏览器请求页面找不到了,则统一返回index.html页面,也就是把index.html当作404来使。
[HTML5 History 模式](https://router.vuejs.org/zh-cn/essentials/history-mode.html)
配置
文档中写了apache和nginx服务器如何配置,这里添加一下tomcat服务器里使如何配置的。
我这里的是在WEB-INF目录下的web.xml文件中添加
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
空白页面
本以为这样就结束了,结果出现空白页面,而且资源加载都没问题,之前hash模式,一切正常,改为history模式就挂了,一脸懵逼。
然后查资料修改测试了两个小时,才发现是因为我这里vue发布后的代码是放在/COMS目录,也就是说不是根目录,这种情况下得在路由配置文件中添加base根目录:
const router = new Router({
//开启history模式需要后端配置404时返回/index.html
mode: 'history',
//当项目不在根目录时,必须添加子目录路径,否则空白页面(资源加载正常)
base: '/COMS',
routes: [
//404页面
{ path: '*', component: ErrorPage },
{...}
]
})
两步解决问题,可以直接http://www.demo.com/login进入页面,完美!
但是如果访问了一个不存在的路由,http://www.demo.com/loginxxx,这时候怎么办?
看上面,给出的代码已经写了,添加一个ErrorPage组件,由前端路由来处理错误页面。
结束
到此结束,此致敬礼!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。