VueCLI PWA で ?# のURLへ飛ばされる

主題の件、VueCLI PWAでカンタンなTodoアプリを作りました。
ローカルサーバー、ウェブサーバー上でページが正常に開かれるのですが配置されたボタンを押すと ?# が付与されたurlへ飛ばれてしまいます。

■ 現象
http://127.0.0.1:8887/#/に配置されたボタンを押すと、http://127.0.0.1:8887/?#/に飛ばされる。
http://127.0.0.1:8887/?#/上ではボタン等は正常に動作する。

■ 解決したいこと
http://127.0.0.1:8887/?#/に飛ばないようにしたい。
（http://127.0.0.1:8887/#/上でボタン等を正常に動作させたい）

以下のサイトを参考にvue-cli pwaをnpm経由でインストール及び実装をしました。
https://qiita.com/gyarasu/items/2f18edc4ae251180d89e

・ライブラリ導入時に実施したこと(npm)
npm uninstall sw-precache-webpack-plugin
npm install --save-dev workbox-webpack-plugin
npm install sass-loader node-sass --save-dev

導入時に変更したコードを抜粋します。

・build/webpack.prod.conf.js

javascript
1'use strict'
2
3const fs = require('fs')
4const path = require('path')
5const utils = require('./utils')
6const webpack = require('webpack')
7const config = require('../config')
8const merge = require('webpack-merge')
9const baseWebpackConfig = require('./webpack.base.conf')
10const CopyWebpackPlugin = require('copy-webpack-plugin')
11const HtmlWebpackPlugin = require('html-webpack-plugin')
12const ExtractTextPlugin = require('extract-text-webpack-plugin')
13const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
14// const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
15const workboxPlugin = require('workbox-webpack-plugin')
16const loadMinified = require('./load-minified')
17
18const env = process.env.NODE_ENV === 'testing'
19  ? require('../config/test.env')
20  : config.build.env
21
22const webpackConfig = merge(baseWebpackConfig, {
23  module: {
24    rules: utils.styleLoaders({
25      sourceMap: config.build.productionSourceMap,
26      extract: true
27    })
28  },
29  devtool: config.build.productionSourceMap ? '#source-map' : false,
30  output: {
31    path: config.build.assetsRoot,
32    filename: utils.assetsPath('js/[name].[chunkhash].js'),
33    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
34  },
35  plugins: [
36    // http://vuejs.github.io/vue-loader/en/workflow/production.html
37    new webpack.DefinePlugin({
38      'process.env': env
39    }),
40    new webpack.optimize.UglifyJsPlugin({
41      compress: {
42        warnings: false
43      },
44      sourceMap: true
45    }),
46    // extract css into its own file
47    new ExtractTextPlugin({
48      filename: utils.assetsPath('css/[name].[contenthash].css')
49    }),
50    // Compress extracted CSS. We are using this plugin so that possible
51    // duplicated CSS from different components can be deduped.
52    new OptimizeCSSPlugin({
53      cssProcessorOptions: {
54        safe: true
55      }
56    }),
57    // generate dist index.html with correct asset hash for caching.
58    // you can customize output by editing /index.html
59    // see https://github.com/ampedandwired/html-webpack-plugin
60    new HtmlWebpackPlugin({
61      filename: process.env.NODE_ENV === 'testing'
62        ? 'index.html'
63        : config.build.index,
64      template: 'index.html',
65      inject: true,
66      minify: {
67        removeComments: true,
68        collapseWhitespace: true,
69        removeAttributeQuotes: true
70        // more options:
71        // https://github.com/kangax/html-minifier#options-quick-reference
72      },
73      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
74      chunksSortMode: 'dependency',
75      serviceWorkerLoader: `<script>${loadMinified(path.join(__dirname,
76        './service-worker-prod.js'))}</script>`
77    }),
78    // split vendor js into its own file
79    new webpack.optimize.CommonsChunkPlugin({
80      name: 'vendor',
81      minChunks: function (module, count) {
82        // any required modules inside node_modules are extracted to vendor
83        return (
84          module.resource &&
85          /.js$/.test(module.resource) &&
86          module.resource.indexOf(
87            path.join(__dirname, '../node_modules')
88          ) === 0
89        )
90      }
91    }),
92    // extract webpack runtime and module manifest to its own file in order to
93    // prevent vendor hash from being updated whenever app bundle is updated
94    new webpack.optimize.CommonsChunkPlugin({
95      name: 'manifest',
96      chunks: ['vendor']
97    }),
98    // copy custom static assets
99    new CopyWebpackPlugin([
100      {
101        from: path.resolve(__dirname, '../static'),
102        to: config.build.assetsSubDirectory,
103        ignore: ['.*']
104      }
105    ]),
106    // service worker caching
107    // new SWPrecacheWebpackPlugin({
108    //  cacheId: 'test',
109    //  filename: 'service-worker.js',
110    //  staticFileGlobs: ['dist/**/*.{js,html,css}'],
111    // minify: true,
112    //  stripPrefix: 'dist/'
113    // })
114    new workboxPlugin.GenerateSW({
115      cacheId: 'test',
116      globDirectory: config.build.assetsRoot,
117      globPatterns: ['**/*.{html,js,css}'],
118      swDest: path.join(config.build.assetsRoot, 'service-worker.js'),
119      skipWaiting: false,
120      clientsClaim: true,
121      runtimeCaching: [
122       {
123         // APIのキャッシュ
124         urlPattern: /.*api.*/,
125         handler: 'networkFirst',
126         options: {
127           cacheName: 'api',
128           expiration: {
129             maxAgeSeconds: 60 * 60 * 24
130           }
131         }
132       }
133     ]
134    })
135  ]
136})
137
138if (config.build.productionGzip) {
139  const CompressionWebpackPlugin = require('compression-webpack-plugin')
140
141  webpackConfig.plugins.push(
142    new CompressionWebpackPlugin({
143      asset: '[path].gz[query]',
144      algorithm: 'gzip',
145      test: new RegExp(
146        '\.(' +
147        config.build.productionGzipExtensions.join('|') +
148        ')$'
149      ),
150      threshold: 10240,
151      minRatio: 0.8
152    })
153  )
154}
155
156if (config.build.bundleAnalyzerReport) {
157  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
158  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
159}
160
161module.exports = webpackConfig
162

・config/index.js

javascript
1'use strict'
2
3// see http://vuejs-templates.github.io/webpack for documentation.
4const path = require('path')
5
6module.exports = {
7  build: {
8    env: require('./prod.env'),
9    // index: path.resolve(__dirname, '../dist/index.html'),
10    // assetsRoot: path.resolve(__dirname, '../dist'),
11    index: path.resolve(__dirname, '../docs/index.html'),
12    assetsRoot: path.resolve(__dirname, '../docs'),
13    assetsSubDirectory: 'static',
14    // assetsPublicPath: '/',
15    assetsPublicPath: './',
16    productionSourceMap: true,
17    // Gzip off by default as many popular static hosts such as
18    // Surge or Netlify already gzip all static assets for you.
19    // Before setting to `true`, make sure to:
20    // npm install --save-dev compression-webpack-plugin
21    productionGzip: false,
22    productionGzipExtensions: ['js', 'css'],
23    // Run the build command with an extra argument to
24    // View the bundle analyzer report after build finishes:
25    // `npm run build --report`
26    // Set to `true` or `false` to always turn it on or off
27    bundleAnalyzerReport: process.env.npm_config_report
28  },
29  dev: {
30    env: require('./dev.env'),
31    port: 8080,
32    autoOpenBrowser: true,
33    assetsSubDirectory: 'static',
34    assetsPublicPath: '/',
35    proxyTable: {},
36    // CSS Sourcemaps off by default because relative paths are "buggy"
37    // with this option, according to the CSS-Loader README
38    // (https://github.com/webpack/css-loader#sourcemaps)
39    // In our experience, they generally work as expected,
40    // just be aware of this issue when enabling this option.
41    cssSourceMap: false
42  }
43}
44