vuerouter在history mode下刷新页面显示Cannot GET

 RorinL     2021年05月29日 星期六 10:29:18     webpack      404错误   vuerouter   webpack    

1.配置history模式

...
export default new VueRouter({
        mode: 'history',
        routes:[
            {
                path:"/article/",name:'article',component:article,
                children:[
                    {path:"alist",component: alist}
                ]
            },
        ]
})

这时候去访问http://localhost:8080/并且随便怎么搞点这点那都能显示
在这里插入图片描述
但是一旦点击刷新就会出现Cannot GET /article/alist


这里先来个解决方法

...
devServer:{
        historyApiFallback: true
    }
...

就是在webpackconfigjs中新增一个这段代码,这时候刷新就不会出现Cannot GET /article/alist

原因

当使用 HTML5 History API 时, 所有的 404 请求都会响应 index.html 的内容
这是来自https://webpack.docschina.org/configuration/dev-server/#devserverhistoryapifallback中的一句描述.
什么意思?来看一下

a.没有使用historyApiFallback: true,且使用了history mode的情况
在这里插入图片描述
访问一些连接,刷新之后
在这里插入图片描述
其实出现Cannot GET /article/alist是因为404错误(这不是废话),没错确实是废话在这里,但是分析上面两张图就知道是因为在刷新之后原本的index已经不存在,他访问http://localhost:8080/article/alist去了,但是index是入口啊,原来的index里的内容就是靠引入mainjs来运行整个项目的,但是访问http://localhost:8080/article/alist,这下面哪来的indexhtml,自然而然也就没有使用mainjs来驱动整个项目,也就无法访问了。

b.使用historyApiFallback: true,且使用了history mode的情况
在这里插入图片描述
不同之处就是访问[刷新]http://localhost:8080/article/alist后会多一个文件夹,为且里面文件的js指向是mainjs

当然了,以上仅适用开发时候,devServer,字如其名嘛,真正生产模式应该不使用这个而是通过配置后端,因为官网也说了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

但说到这我只知道这么理解。我还是不能理解mode: ‘history’,究竟发生了什么,为什么用了historyApiFallback之后就能刷新了,希望有大佬能指导一下渴望真相的我

本文作者RorinL,vuerouter在history mode下刷新页面显示Cannot GET_gfhj778的博客-CSDN博客也是本站作者


暂无评论

发表回复

您的电子邮箱地址不会被公开。

CAPTCHAis initialing...