node.js - webpack 生产构建 IIS 后出现空白页面

Question

我有一个 VUE 2 应用程序，想要将其部署在 Windows Server 2012 R2 上的 IIS 上。

Node 版本:6.9.5npm 版本:4.3.0

我的问题是，当我调用该站点(index.html 和带有 webpack 生成的 js 和 css 的静态文件夹)时，该站点保持空白。所有 js 和 css 文件均已正确加载，但网站不显示任何内容。

这是我的 webpack 配置文件:

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

配置.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"
  }
}

我也将 devDependency 移至依赖项，以确保这不是问题。

我生成的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 开发服务器就可以了。也在我的本地机器上使用 express 。我不明白发生了什么......

在 webpack 构建之后，我可以将其作为普通网站添加到 iis 中，对吗？不需要iisnode。

谢谢!

多米尼克

编辑:

开发工具图片:

Answer 1

我也遇到过这个问题。我正在使用 IIS 在 .NET Core 下运行 Vue.js 2.0 应用程序。该版本在 Chrome 下显示为空白页面，即使所有资源都已正确下载，也没有错误消息。

事实证明，我必须在“Content-Security-Policy”自定义 header 下的 web.config 文件中启用 eval + 内联脚本:

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

希望这对您有所帮助!