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之后就能刷新了,希望有大佬能指导一下渴望真相的我

我的博客https://www.rfbynet.club/archives/118.html