webpack devServer启动后报错 “Cannot GET /xxx“ 解决办法

问题背景

在开发一个后台项目的过程中，其 publicPath 前缀为 /admin，然后用 webpack devServer 启动的时候，访问二级目录 /admin/tasks 的时候报了如下错误

但访问 /admin 就正常展示。

原因分析

由于访问 /admin 正常，说明 devServer 有正常启动。再想到项目为单页应用使用了 vue-router，而且路由模式是 history 模式，需要服务端做兜底处理，即将任何找不到的页面重定向到 index.html，然后看项目中 webpack devServer 果然没有配置兜底规则。

解决办法

在 webpack devServer 的字段里加上如下配置，注意：由于项目中有 publicPath 前缀，fallback 的 index.html 也需要加上才行。

    ...
    devServer: {
        port: 8882,
        historyApiFallback: {
            index: "/admin/index.html"
        },
    }

至此，问题解决。