Webpackプロダクションビルド後の空のページIIS

Question

Windows Server 2012 R2のIISに展開するVUE 2アプリケーションがあります。

ノードのバージョン：6.9.5 NPMバージョン：4.3.0

私の問題は、私は、サイト（のWebPACKによって生成されたJSやCSSでのindex.htmlと静的フォルダ）を呼び出したときにサイトが空白のままです。すべてのjsファイルとcssファイルは正しく読み込まれますが、サイトには何も表示されません。ここで

はWebPACKのための私のconfigファイルは、次のとおりです。

bundle.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') 

    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.base.conf.js：

var path = require('path') 
var utils = require('./utils') 
var config = require('../config') 
var vueLoaderConfig = require('./vue-loader.conf') 

function resolve (dir) { 
    return path.join(__dirname, '..', dir) 
} 

module.exports = { 
    entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: config.build.assetsRoot, 
    filename: '[name].js', 
    publicPath: process.env.NODE_ENV === 'production' 
     ? config.build.assetsPublicPath 
     : config.dev.assetsPublicPath 
    }, 
    externals: { 
    'jquery': 'jQuery' 
    }, 
    resolve: { 
    extensions: ['.js', '.vue', '.json'], 
    modules: [ 
     resolve('src'), 
     resolve('node_modules') 
    ], 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js', 
     'src': resolve('src'), 
     'assets': resolve('src/assets'), 
     'components': resolve('src/components') 
    } 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(js|vue)$/, 
     loader: 'eslint-loader', 
     enforce: "pre", 
     include: [resolve('src'), resolve('test')], 
     options: { 
      formatter: require('eslint-friendly-formatter') 
     } 
     }, 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: vueLoaderConfig 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     include: [resolve('src'), resolve('test')] 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     loader: 'url-loader', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
     { 
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
     loader: 'url-loader', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
     } 
     } 
    ] 
    } 
} 

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(), 
    // 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: false, 
     removeAttributeQuotes: false 
     // more options: 
     // https://github.com/kangax/html-minifier#options-quick-reference 
     }, 
     // necessary to consistently work with multiple chunks via CommonsChunkPlugin 
     chunksSortMode: 'dependency' 
    }), 
    // 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 

config.js：

// see http://vuejs-templates.github.io/webpack for documentation. 
var path = require('path') 

module.exports = { 
    build: { 
    env: require('./prod.env'), 
    index: path.resolve(__dirname, '../wwwroot/index.html'), 
    assetsRoot: path.resolve(__dirname, '../wwwroot/'), 
    assetsSubDirectory: 'static', 
    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: 80, 
    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 
    } 
} 

.bablerc：

{ 
    "presets": [ "es2015", "stage-0" ], 
    "plugins": [ "transform-runtime" ], 
    "comments": false, 
    "env": { 
    "test": { 
     "plugins": [ "istanbul" ] 
    } 
    } 
} 

package.json

{ 
    "name": "coreui-vue", 
    "version": "1.0.0-alpha.4", 
    "description": "Open Source Admin Template", 
    "author": "Łukasz Holeczek <lukasz@holeczek.pl>", 
    "private": true, 
    "scripts": { 
    "dev": "node build/dev-server.js", 
    "build": "node build/build.js", 
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 
    "e2e": "node test/e2e/runner.js", 
    "test": "npm run unit && npm run e2e", 
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 
    }, 
    "dependencies": { 
    "auth0-js": "^8.8.0", 
    "axios": "^0.16.1", 
    "jwt-decode": "^2.2.0", 
    "mini-toastr": "^0.6.5", 
    "strip-ansi": "^4.0.0", 
    "jquery": "^3.2.1", 
    "vue": "2.2.4", 
    "vue-chartjs": "2.5.4", 
    "vue-notifications": "^0.8.0", 
    "vue-router": "^2.2.0", 
    "vue-strap": "github:wffranco/vue-strap", 
    "vue-video-player": "^3.0.8", 
    "vuex": "^2.3.1", 
    "aspnet-webpack": "^2.0.1", 
    "autoprefixer": "6.7.7", 
    "babel-core": "6.24.0", 
    "babel-eslint": "7.2.0", 
    "babel-loader": "^7.1.1", 
    "babel-plugin-istanbul": "3.1.2", 
    "babel-plugin-transform-runtime": "^6.22.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "babel-register": "6.24.0", 
    "chai": "^3.5.0", 
    "chalk": "^1.1.3", 
    "chromedriver": "2.28.0", 
    "connect-history-api-fallback": "^1.3.0", 
    "copy-webpack-plugin": "^4.0.1", 
    "cross-env": "3.2.4", 
    "cross-spawn": "^5.0.1", 
    "css-loader": "0.26.4", 
    "eslint": "3.18.0", 
    "eslint-config-standard": "6.2.1", 
    "eslint-friendly-formatter": "^2.0.7", 
    "eslint-loader": "^1.6.1", 
    "eslint-plugin-html": "^2.0.0", 
    "eslint-plugin-promise": "3.5.0", 
    "eslint-plugin-standard": "2.1.1", 
    "eventsource-polyfill": "^0.9.6", 
    "express": "4.15.2", 
    "extract-text-webpack-plugin": "2.1.0", 
    "file-loader": "^0.10.0", 
    "friendly-errors-webpack-plugin": "1.6.1", 
    "function-bind": "^1.1.0", 
    "html-webpack-plugin": "^2.28.0", 
    "http-proxy-middleware": "0.17.4", 
    "inject-loader": "2.0.1", 
    "karma": "^1.4.1", 
    "karma-coverage": "^1.1.1", 
    "karma-mocha": "^1.3.0", 
    "karma-phantomjs-launcher": "1.0.4", 
    "karma-sinon-chai": "^1.2.4", 
    "karma-sourcemap-loader": "^0.3.7", 
    "karma-spec-reporter": "0.0.26", 
    "karma-webpack": "2.0.3", 
    "lolex": "^1.5.2", 
    "mocha": "^3.2.0", 
    "nightwatch": "0.9.13", 
    "opn": "^4.0.2", 
    "optimize-css-assets-webpack-plugin": "^1.3.0", 
    "ora": "^1.1.0", 
    "phantomjs-prebuilt": "^2.1.14", 
    "rimraf": "^2.6.0", 
    "sass-loader": "4.1.1", 
    "selenium-server": "3.3.1", 
    "semver": "^5.3.0", 
    "sinon": "1.17.7", 
    "sinon-chai": "2.9.0", 
    "url-loader": "^0.5.7", 
    "vue-loader": "^13.0.4", 
    "vue-style-loader": "2.0.4", 
    "vue-template-compiler": "2.2.4", 
    "webpack": "^3.4.1", 
    "webpack-bundle-analyzer": "^2.8.3", 
    "webpack-dev-middleware": "^1.12.0", 
    "webpack-hot-middleware": "^2.18.2", 
    "webpack-merge": "^4.1.0" 
    }, 
    "devDependencies": { 

    }, 
    "engines": { 
    "node": ">= 4.0.0", 
    "npm": ">= 3.0.0" 
    } 
} 

私はそれは問題ではない、確かに、依存関係にもdevDependenciesを移動しました。 WebPACKのdevのサーバーのIT作業ので

<!DOCTYPE html><html><head><meta charset=utf-8><title>CoreUI - Open Source Bootstrap Admin Template</title><link href=static/css/font-awesome.min.css rel=stylesheet><link href=static/css/simple-line-icons.css rel=stylesheet><link href=static/css/style.css rel=stylesheet><link href=static/css/app.06e44e579e587787413ab48c2c604c4d.css rel=stylesheet></head><body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"><div id=app></div><script type=text/javascript src=static/js/vendor.2cb2e5935748c34893e8.js></script><script type=text/javascript src=static/js/app.9dc82c9f50710d9ababd.js></script></body></html> 

：

私の生成のindex.htmlは次のようになります。また、私の地元のマシンでも表現しています。 何が起こっているのか分かりません...

webpackビルド後、これをiisに通常のウェブサイトとして追加できますか？ iisnodeは必要ありません。

ありがとうございました！

ドミニク

EDIT：DEVツールの

画像：

Answer 1

私は、この問題に実行していましたよく私はIISを使って.NET Coreの下でVue.js 2.0 Appを実行しています。ビルドはChromeの下に空白のページとして表示されていましたが、すべてのアセットが正しくダウンロードされていてもエラーメッセージは表示されませんでした。

<system.webServer> 
    <httpProtocol> 
    <customHeaders> 
<add name="Content-Security-Policy" value="script-src * 'unsafe-inline' 'unsafe-eval';" /> 
    </customHeaders> 
    </httpProtocol> 
</system.webServer> 

・ホープこれはアウトに役立ちます：

は、「コンテンツ・セキュリティ・ポリシーのカスタムヘッダーの下で、私は + インラインスクリプトにweb.configファイルにをのevalの使用を有効にする必要がありましたが判明します！