Vue路由/Webpack Dev Server刷新页面出现Cannot GET /path问题求助

Hey folks, 刚确认这是Windows平台下Vue Webpack模板的一个bug，官方已经在推进修复工作了。

问题重现场景 #

• 用vue init webpack projectName命令创建新的Vue项目
• 开启路由的mode: 'history'模式后，本地运行npm run dev时出现以下问题：
  • 从首页跳转至/contact等子路由能正常显示内容，但刷新页面直接弹出Cannot GET /contact错误
  • 手动在地址栏输入任意子路由路径，同样触发404报错
  • 即使配置了{ path: '*', redirect: '/' }的全局重定向规则，也完全不起作用，依然报404

我的路由配置（src/router/index.js） #

import Vue from 'vue'
import Router from 'vue-router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import Home from '@/components/Home'
import Contact from '@/components/Contact'
Vue.use(Router)
Vue.use(Vuetify)
export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/contact', name: 'Contact', component: Contact }
  ]
})

问题排查发现 #

我注意到项目的webpack.dev.conf.js里新增了historyApiFallback相关配置，推测问题根源就在这里：

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
    rewrites: [
      { from: /.*/, to: path.join(config.dev.assetsPublicPath, 'index.html') },
    ],
  },
  // [...] 其他省略的配置项
}

临时修复建议（供等待官方修复期间使用） #

如果着急解决问题，可以先试试以下两种临时方案：

1. 简化historyApiFallback配置，直接设置为true：

historyApiFallback: true

2. 检查config/index.js里的assetsPublicPath值，确保它是'/'（根路径），避免Windows路径分隔符导致的拼接错误

内容的提问来源于stack exchange，提问作者Un1