webpack生产后生成IIS的空页面
我有一个VUE 2应用程序，我想在Windows Server 2012 R2上的IIS上部署。
节点版本：6.9.5 npm版本：4.3.0
我的问题是，当我打电话给该网站（index.html和静态文件夹与由webpack生成的js和css），该网站保持空白。 所有的js和css文件加载正确，但网站不显示任何东西。
这里是我的webpack的configuration文件：
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也移到了依赖关系上，这不是问题。
我生成的index.html如下所示：
<!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>
随着webpack开发服务器的工作。 并在我的本地机器上快递。 我不明白发生了什么…
在webpack的构build之后，我可以把这个添加到iis中作为正常的网站，对吗？ 不需要iisnode。
谢谢！
多米尼克
编辑：
开发工具的图像：
我也遇到了这个问题。 我使用IIS在.NET Core下运行Vue.js 2.0应用程序。 构build在Chrome浏览器中显示为空白页面，即使所有资源都正确下载，也没有错误消息。
事实certificate，我必须在web.config文件的“Content-Security-Policy”自定义标题下启用eval + inline脚本 ：
<system.webServer> <httpProtocol> <customHeaders> <add name="Content-Security-Policy" value="script-src * 'unsafe-inline' 'unsafe-eval';" /> </customHeaders> </httpProtocol> </system.webServer>
希望这有助于！