vue-routerのHistory モード+webpack-dev-serverでサブディレクトリにアクセスする方法

久しぶりにQiitaに帰ってキタ（Qiitaaa）ーーー！！！
どうも、岩元です。

webpack-dev-serverの開発環境の設定でハマったのでメモ。
下記のようにhistoryモードで、children オプションを利用してネストした構成にしたとき、/usersにはアクセスできるが/users/fugaにアクセスしようとすると404errorが返ってくる現象が発生した。

router.js

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

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import("@/pages/Home")
    },
    {
      path: '/users',
      component: () => import("@/pages/Users"),
      children: [
        {
          path: '',
          component: () => import("@/pages/users/Index")
        },
        {
          path: 'fuga',
          component: () => import("@/pages/users/fuga")
        },
}

publicPath が設定されていなかったのが原因だった。

webpack.conf.js

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: {
    app: './src/app.coffee'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name]-[hash].bundle.js',
+    publicPath: '/'
  },
...

  devServer: {
    open: true,
    writeToDisk: true,
    contentBase: path.join(__dirname, '/'),
    watchContentBase: true,
    port: 8080,
    historyApiFallback: {
      historyApiFallback: true
    }
  },

参考: WebpackDevServer breaks on complex nested routes #113

余談: 最近BiSHにハマっている