fixed webpack devserver to serve router subpath

build/webpack.config.base.js

@@ -2,6 +2,7 @@
 
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const { VueLoaderPlugin } = require('vue-loader')
 
 const utils = require('./utils')
@@ -67,8 +68,10 @@ module.exports = {
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
-      inject: true
+      inject: true,
+      alwaysWriteToDisk: true
     }),
+    new HtmlWebpackHarddiskPlugin(),
     new VueLoaderPlugin(),
     new CopyWebpackPlugin([{
       from: utils.resolve('static/img'),

build/webpack.config.dev.js

@@ -10,13 +10,21 @@ const PORT = 8988
 module.exports = merge(baseConfig, {
   mode: 'development',
 
+  output: {
+    publicPath: '/'
+  },
+
   devServer: {
-    clientLogLevel: 'warning',
+    clientLogLevel: 'debug',
     historyApiFallback: {
-      rewrites: [
-        { from: /.*/, to: '/index.html' },
-      ],
+      // rewrites: [
+      //   { from: /.*/, to: '/index.html' },
+      // ],
+      index: '/',
+      disableDotRule: true,
+      verbose: true
     },
+    // historyApiFallback: true,
     hot: true,
     contentBase: 'dist',
     compress: true,
@@ -24,10 +32,10 @@ module.exports = merge(baseConfig, {
     host: '0.0.0.0',
     port: PORT,
     disableHostCheck: true,
-    // open: "firefox-developer-edition",
     overlay: { warnings: false, errors: true },
     publicPath: '/',
-    quiet: true,
+    quiet: false,
+    // open: "firefox-developer-edition",
   },
 
   module: {

package-lock.json

@@ -2740,7 +2740,7 @@
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
-      "integrity": "sha1-LUEe92uFabbQyEBo2r6FsKpeXBc=",
+      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
       "dev": true,
       "requires": {
         "source-map": "~0.6.0"
@@ -2749,7 +2749,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
         }
       }
@@ -3307,9 +3307,9 @@
       }
     },
     "css-what": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz",
-      "integrity": "sha1-wIdtnQSAkn19SSDc1yrzWVZJVU0=",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
+      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
       "dev": true
     },
     "cssesc": {
@@ -3687,7 +3687,7 @@
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-      "integrity": "sha1-ZyGp2u4uKTaClVtq/kFncWJ7t2g=",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
       "dev": true,
       "requires": {
         "utila": "~0.4"
@@ -3700,19 +3700,19 @@
       "dev": true
     },
     "dom-serializer": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
-      "integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz",
+      "integrity": "sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==",
       "dev": true,
       "requires": {
-        "domelementtype": "~1.1.1",
-        "entities": "~1.1.1"
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
       },
       "dependencies": {
         "domelementtype": {
-          "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
-          "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==",
           "dev": true
         }
       }
@@ -3726,7 +3726,7 @@
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha1-0EjESzew0Qp/Kj1f7j9DM9eQSB8=",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
       "dev": true
     },
     "domexception": {
@@ -3739,9 +3739,9 @@
       }
     },
     "domhandler": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.1.0.tgz",
-      "integrity": "sha1-0mRvXlf2w7qxHPbLBdPArPdBJZQ=",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
       "dev": true,
       "requires": {
         "domelementtype": "1"
@@ -3867,9 +3867,9 @@
       }
     },
     "entities": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha1-vfpzUplmTfr9NFKe1PhSKidf6lY=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
+      "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==",
       "dev": true
     },
     "errno": {
@@ -6215,7 +6215,7 @@
     "html-minifier": {
       "version": "3.5.21",
       "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz",
-      "integrity": "sha1-0AQOBUcw41TbAIRjWTGUAVIS0gw=",
+      "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==",
       "dev": true,
       "requires": {
         "camel-case": "3.0.x",
@@ -6230,24 +6230,41 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
         },
         "uglify-js": {
-          "version": "3.4.9",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
-          "integrity": "sha1-rwLxgMEgfXZDLkc+0koo9KeCuuM=",
+          "version": "3.4.10",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
+          "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==",
           "dev": true,
           "requires": {
-            "commander": "~2.17.1",
+            "commander": "~2.19.0",
             "source-map": "~0.6.1"
+          },
+          "dependencies": {
+            "commander": {
+              "version": "2.19.0",
+              "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
+              "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
+              "dev": true
+            }
           }
         }
       }
     },
+    "html-webpack-harddisk-plugin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/html-webpack-harddisk-plugin/-/html-webpack-harddisk-plugin-1.0.1.tgz",
+      "integrity": "sha512-GWfutTqfxOe53qEKocqAFrrLVP/EJbmJZDAS5jBBmALkfyc2aakoQkSgo3fitYJORWcN0Fi8ekuySxfffhhRYw==",
+      "dev": true,
+      "requires": {
+        "mkdirp": "^0.5.1"
+      }
+    },
     "html-webpack-plugin": {
       "version": "3.2.0",
-      "resolved": "http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
       "integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
       "dev": true,
       "requires": {
@@ -6263,7 +6280,7 @@
         "big.js": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
-          "integrity": "sha1-pfwpi4G54Nyi5FiCR4S2XFK6WI4=",
+          "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
           "dev": true
         },
         "json5": {
@@ -6287,49 +6304,35 @@
       }
     },
     "htmlparser2": {
-      "version": "3.3.0",
-      "resolved": "http://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
-      "integrity": "sha1-zHDQWln2VC5D8OaFyYLhTJJKnv4=",
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
       "dev": true,
       "requires": {
-        "domelementtype": "1",
-        "domhandler": "2.1",
-        "domutils": "1.1",
-        "readable-stream": "1.0"
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
       },
       "dependencies": {
-        "domutils": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.1.6.tgz",
-          "integrity": "sha1-vdw94Jm5ou+sxRxiPyj0FuzFdIU=",
-          "dev": true,
-          "requires": {
-            "domelementtype": "1"
-          }
-        },
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
           "dev": true
         },
         "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
+          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
           "dev": true,
           "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "0.0.1",
-            "string_decoder": "~0.10.x"
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
           }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-          "dev": true
         }
       }
     },
@@ -8328,7 +8331,7 @@
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
-      "integrity": "sha1-YLgTOWvjmz8SiKTB7V0efSi0ZKw=",
+      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
       "dev": true,
       "requires": {
         "lower-case": "^1.1.1"
@@ -8602,7 +8605,7 @@
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha1-sr0pXDfj3VijvwcAN2Zjuk2c8Fw=",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
       "dev": true,
       "requires": {
         "boolbase": "~1.0.0"
@@ -9701,14 +9704,14 @@
       "dev": true
     },
     "renderkid": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.2.tgz",
-      "integrity": "sha1-EtMQ8lU2DAetj94lP2yeneNy0qo=",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.3.tgz",
+      "integrity": "sha512-z8CLQp7EZBPCwCnncgf9C4XAi3WR0dv+uWu/PjIyhhAb5d6IJ/QZqlHFprHeKT+59//V6BNUsLbvN8+2LarxGA==",
       "dev": true,
       "requires": {
         "css-select": "^1.1.0",
-        "dom-converter": "~0.2",
-        "htmlparser2": "~3.3.0",
+        "dom-converter": "^0.2",
+        "htmlparser2": "^3.3.0",
         "strip-ansi": "^3.0.0",
         "utila": "^0.4.0"
       }
@@ -12026,6 +12029,11 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
       "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
     },
+    "vuex-router-sync": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/vuex-router-sync/-/vuex-router-sync-5.0.0.tgz",
+      "integrity": "sha512-Mry2sO4kiAG64714X1CFpTA/shUH1DmkZ26DFDtwoM/yyx6OtMrc+MxrU+7vvbNLO9LSpgwkiJ8W+rlmRtsM+w=="
+    },
     "w3c-hr-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",

package.json

@@ -22,7 +22,8 @@
     "vue": "^2.6.10",
     "vue-meta": "^1.6.0",
     "vue-router": "^3.1.3",
-    "vuex": "^3.1.1"
+    "vuex": "^3.1.1",
+    "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.6.0",
@@ -44,6 +45,7 @@
     "eslint-plugin-vue": "^5.2.3",
     "eslint-plugin-vue-a11y": "0.0.28",
     "file-loader": "^4.2.0",
+    "html-webpack-harddisk-plugin": "^1.0.1",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.9.0",
     "jest-serializer-vue": "^2.0.2",