vue-router设置mode为history页面报Cannot Get

场景

在开发环境中，觉得通过hash方式访问链接有点奇怪，就想使用history模式，于是在router/index.js设置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)

const router = new VueRouter({
	mode: 'history',
	routes
})

结果，页面竟然加载不出来，还显示Cannot Get。

解决办法

在webpack.config.js中设置devServer项中historyApiFallback

....
const config = {
	...
	devServer: {
		// history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
		historyApiFallback: {
			index: '/index.html' //与output的publicPath有关(HTMLplugin生成的html默认为index.html)
		}
	}
}