npm実行ビルドが動作しません。 "index.htmlをfile：//に開くと動作しません。"

Question

私はVue（v2）を使って単一のページアプリケーションを構築しようとしています。コマンドnpm run buildの実行は機能しません。私は私のフォルダに作成された静的ファイルを見つけることができません。エラーメッセージは表示されませんが、コマンドラインでnpm run buildを実行した後に表示されます。

ビルドが完了しました。ヒント：ビルドされたファイルは、HTTPサーバー上で提供されることを意図しています。 file：//でindex.htmlを開くと動作しません。

次のように（npm run buildが実行するスクリプトがある）私のbuild/build.jsファイルの内容は次のとおりです。

require('./check-versions')() 
process.env.NODE_ENV = 'production' 

var ora = require('ora') 
var rm = require('rimraf') 
var path = require('path') 
var chalk = require('chalk') 
var webpack = require('webpack') 
var config = require('../config') 
var webpackConfig = require('./webpack.prod.conf') 

var spinner = ora('building for production...') 
spinner.start() 

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 
    if (err) throw err 
    webpack(webpackConfig, function (err, stats) { 
    spinner.stop() 
    if (err) throw err 
    process.stdout.write(stats.toString({ 
     colors: true, 
     modules: false, 
     children: false, 
     chunks: false, 
     chunkModules: false 
    }) + '\n\n') 

    if (stats.hasErrors()) { 
     console.log(chalk.red(' Build failed with errors.\n')) 
     process.exit(1) 
    } 

    console.log(chalk.cyan(' Build complete.\n')) 
    console.log(chalk.yellow(
     ' Tip: built files are meant to be served over an HTTP server.\n' + 
     ' Opening index.html over file:// won\'t work.\n' 
    )) 
    }) 
}) 

私webpack.prod.conf.jsファイルの内容：

var path = require('path') 
var utils = require('./utils') 
var webpack = require('webpack') 
var config = require('../config') 
var merge = require('webpack-merge') 
var baseWebpackConfig = require('./webpack.base.conf') 
var CopyWebpackPlugin = require('copy-webpack-plugin') 
var HtmlWebpackPlugin = require('html-webpack-plugin') 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 

var env = process.env.NODE_ENV === 'testing' 
    ? require('../config/test.env') 
    : config.build.env 

var 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' 
    }), 
// keep module.id stable when vender modules does not change 
    new webpack.HashedModuleIdsPlugin(), 
// 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: ['.*'] 
     } 
    ]) 
    ] 
}) 

if (config.build.productionGzip) { 
    var 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) { 
    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 
    webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 
} 

module.exports = webpackConfig 

どうすればいいですか？

Answer 1

私はついにconfig/index.jsに行き、AssetPublicPathをデフォルトパスから自分のパスに変更しました。そして、それは働いた！しかしヒントはまだそこにあります。私はそれがとにかく問題だとは思わない。

Answer 2

ファイル：設定/ index.js 変更assetsPublicPath '/' から