質問編集履歴

2 変更

street

street score 30

2018/04/11 19:28  投稿
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/?#/に飛ばないようにしたい）
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
'use strict'
const fs = require('fs')
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const workboxPlugin = require('workbox-webpack-plugin')
const loadMinified = require('./load-minified')
const env = process.env.NODE_ENV === 'testing'
 ? require('../config/test.env')
 : config.build.env
const webpackConfig = merge(baseWebpackConfig, {
 module: {
   rules: utils.styleLoaders({
     sourceMap: config.build.productionSourceMap,
     extract: true
   })
 },
 devtool: config.build.productionSourceMap ? '#source-map' : false,
 output: {
   path: config.build.assetsRoot,
   filename: utils.assetsPath('js/[name].[chunkhash].js'),
   chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 },
 plugins: [
   // http://vuejs.github.io/vue-loader/en/workflow/production.html
   new webpack.DefinePlugin({
     'process.env': env
   }),
   new webpack.optimize.UglifyJsPlugin({
     compress: {
       warnings: false
     },
     sourceMap: true
   }),
   // extract css into its own file
   new ExtractTextPlugin({
     filename: utils.assetsPath('css/[name].[contenthash].css')
   }),
   // Compress extracted CSS. We are using this plugin so that possible
   // duplicated CSS from different components can be deduped.
   new OptimizeCSSPlugin({
     cssProcessorOptions: {
       safe: true
     }
   }),
   // generate dist index.html with correct asset hash for caching.
   // you can customize output by editing /index.html
   // see https://github.com/ampedandwired/html-webpack-plugin
   new HtmlWebpackPlugin({
     filename: process.env.NODE_ENV === 'testing'
       ? 'index.html'
       : config.build.index,
     template: 'index.html',
     inject: true,
     minify: {
       removeComments: true,
       collapseWhitespace: true,
       removeAttributeQuotes: true
       // more options:
       // https://github.com/kangax/html-minifier#options-quick-reference
     },
     // necessary to consistently work with multiple chunks via CommonsChunkPlugin
     chunksSortMode: 'dependency',
     serviceWorkerLoader: `<script>${loadMinified(path.join(__dirname,
       './service-worker-prod.js'))}</script>`
   }),
   // split vendor js into its own file
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     minChunks: function (module, count) {
       // any required modules inside node_modules are extracted to vendor
       return (
         module.resource &&
         /\.js$/.test(module.resource) &&
         module.resource.indexOf(
           path.join(__dirname, '../node_modules')
         ) === 0
       )
     }
   }),
   // extract webpack runtime and module manifest to its own file in order to
   // prevent vendor hash from being updated whenever app bundle is updated
   new webpack.optimize.CommonsChunkPlugin({
     name: 'manifest',
     chunks: ['vendor']
   }),
   // copy custom static assets
   new CopyWebpackPlugin([
     {
       from: path.resolve(__dirname, '../static'),
       to: config.build.assetsSubDirectory,
       ignore: ['.*']
     }
   ]),
   // service worker caching
   // new SWPrecacheWebpackPlugin({
   // cacheId: 'test',
   // filename: 'service-worker.js',
   // staticFileGlobs: ['dist/**/*.{js,html,css}'],
   // minify: true,
   // stripPrefix: 'dist/'
   // })
   new workboxPlugin.GenerateSW({
     cacheId: 'test',
     globDirectory: config.build.assetsRoot,
     globPatterns: ['**/*.{html,js,css}'],
     swDest: path.join(config.build.assetsRoot, 'service-worker.js'),
     skipWaiting: false,
     clientsClaim: true,
     runtimeCaching: [
      {
        // APIのキャッシュ
        urlPattern: /.*api.*/,
        handler: 'networkFirst',
        options: {
          cacheName: 'api',
          expiration: {
            maxAgeSeconds: 60 * 60 * 24
          }
        }
      }
    ]
   })
 ]
})
if (config.build.productionGzip) {
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 webpackConfig.plugins.push(
   new CompressionWebpackPlugin({
     asset: '[path].gz[query]',
     algorithm: 'gzip',
     test: new RegExp(
       '\\.(' +
       config.build.productionGzipExtensions.join('|') +
       ')$'
     ),
     threshold: 10240,
     minRatio: 0.8
   })
 )
}
if (config.build.bundleAnalyzerReport) {
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
```
・config/index.js
```javascript
'use strict'
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
 build: {
   env: require('./prod.env'),
   // index: path.resolve(__dirname, '../dist/index.html'),
   // assetsRoot: path.resolve(__dirname, '../dist'),
   index: path.resolve(__dirname, '../docs/index.html'),
   assetsRoot: path.resolve(__dirname, '../docs'),
   assetsSubDirectory: 'static',
   // assetsPublicPath: '/',
   assetsPublicPath: './',
   productionSourceMap: true,
   // Gzip off by default as many popular static hosts such as
   // Surge or Netlify already gzip all static assets for you.
   // Before setting to `true`, make sure to:
   // npm install --save-dev compression-webpack-plugin
   productionGzip: false,
   productionGzipExtensions: ['js', 'css'],
   // Run the build command with an extra argument to
   // View the bundle analyzer report after build finishes:
   // `npm run build --report`
   // Set to `true` or `false` to always turn it on or off
   bundleAnalyzerReport: process.env.npm_config_report
 },
 dev: {
   env: require('./dev.env'),
   port: 8080,
   autoOpenBrowser: true,
   assetsSubDirectory: 'static',
   assetsPublicPath: '/',
   proxyTable: {},
   // CSS Sourcemaps off by default because relative paths are "buggy"
   // with this option, according to the CSS-Loader README
   // (https://github.com/webpack/css-loader#sourcemaps)
   // In our experience, they generally work as expected,
   // just be aware of this issue when enabling this option.
   cssSourceMap: false
 }
}
```
お手数ですが、考えられる問題点やVueCLI導入時の留意点などをご教示していただきたいです。
また、コードの変更以外にも途中でプロジェクト名(フォルダとプロジェクト名がかかれた実装部）を手動で変更した経緯があります。
宜しくお願い致します。
  • Vue.js

    2098 questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。
1 タイトル変更

street

street score 30

2018/04/11 19:27  投稿
主題の件、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
'use strict'
const fs = require('fs')
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const workboxPlugin = require('workbox-webpack-plugin')
const loadMinified = require('./load-minified')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: config.build.env
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
serviceWorkerLoader: `<script>${loadMinified(path.join(__dirname,
'./service-worker-prod.js'))}</script>`
}),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
]),
// service worker caching
// new SWPrecacheWebpackPlugin({
// cacheId: 'test',
// filename: 'service-worker.js',
// staticFileGlobs: ['dist/**/*.{js,html,css}'],
// minify: true,
// stripPrefix: 'dist/'
// })
new workboxPlugin.GenerateSW({
cacheId: 'test',
globDirectory: config.build.assetsRoot,
globPatterns: ['**/*.{html,js,css}'],
swDest: path.join(config.build.assetsRoot, 'service-worker.js'),
skipWaiting: false,
clientsClaim: true,
runtimeCaching: [
{
// APIのキャッシュ
urlPattern: /.*api.*/,
handler: 'networkFirst',
options: {
cacheName: 'api',
expiration: {
maxAgeSeconds: 60 * 60 * 24
}
}
}
]
})
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
```
・config/index.js
```javascript
'use strict'
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
// index: path.resolve(__dirname, '../dist/index.html'),
// assetsRoot: path.resolve(__dirname, '../dist'),
index: path.resolve(__dirname, '../docs/index.html'),
assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
// assetsPublicPath: '/',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
```
お手数ですが、考えられる問題点やVueCLI導入時の留意点などをご教示していただきたいです。
また、コードの変更以外にも途中でプロジェクト名(フォルダとプロジェクト名がかかれた実装部）を手動で変更した経緯があります。
宜しくお願い致します。
  • Vue.js

    2098 questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る