Question

我无法让我的生产版本在IIS上运行。应用程序似乎加载资源（bundle.js和bundle.css），但会显示一个空白页面。浏览器中没有错误。我不清楚问题出在哪里或如何调试它。

我正在使用：

React 15.3.1
react-router 3
redux 3.2.1
webpack 1.12.11

正在加载来源：

我的代码目前设置如下：

的index.html

    <html>
    <head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="/src/images/favicon.png"/>
    <link rel="stylesheet" type="text/css" href="./dist/bundle.css"/>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>

</head>

<body>
<div id="root"></div>
</body>

<script src="./dist/bundle.js"></script>

</html>

的web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
  <rewrite>
    <rules>
      <rule name="ReactRouter Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

prod.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    devtool: 'source-map',

    entry: [
        "babel-polyfill",
        'bootstrap-loader',
        'bootstrap-loader/extractStyles'],

    output: {
        publicPath: '/dist/',
    },

    module: {
        loaders: [{
            test: /\.scss$/,
            loader: 'style!css!postcss-loader!sass',
        }],
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"',
            },
            __DEVELOPMENT__: false,
        }),
        new ExtractTextPlugin('bundle.css'),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
          })
    ],
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Redirect, browserHistory } from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { syncHistoryWithStore } from 'react-router-redux';

import configureStore from './store/configureStore';
import routes from './routes';
import './style.scss';

require('expose?$!expose?jQuery!jquery');
require('bootstrap-webpack');

injectTapEventPlugin();
const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Redirect from="/" to="map" />
            {routes}
        </Router>
    </Provider>,
    document.getElementById('root'),
);

routes.js

import React from 'react';

import { Route } from 'react-router';

import { App } from './containers/App';

import { MapContainer } from './containers/MapContainer';

export default (
    <Route path="/" component={App}>
        <Route path="map(/:type)(/:id)" component={MapContainer} />
    </Route>
);

将react-router-redux部署到IIS问题

0 个答案: