vue history模式刷新404
花与少年丶 人气:0项目场景:
提示:这里简述项目相关背景:
vue项目路由history模式
问题描述
提示:这里描述项目中遇到的问题:
vue history模式刷新404原因
原因分析:
因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404 解决方案:
第一步
如何切换history模式 在router.js中配置
const router = new VueRouter({ mode: ‘history', base: process.env.BASE_URL, routes, // 切换路由后滚动条置顶 scrollBehavior() { return { x: 0, y: 0 } } }) export default router
第二步
module.exports = { publicPath: ‘/', //这个必须,引入静态资源需要从根路径引入,否则会找不到静态资源 devServer: { // history模式下的url会请求到服务器端,但是服务器端并没有这一个资源文件,就会返回404,所以需要配置这一项 historyApiFallback: { index: ‘/index.html' //与output的publicPath }, }, }
总结
加载全部内容