React + React Router + ASP.NET MVC / IIS 仅在生产中显示空白页？答案

【问题标题】：React + React Router + ASP.NET MVC / IIS showing blank page in production only?React + React Router + ASP.NET MVC / IIS 仅在生产中显示空白页？
【发布时间】：2019-04-01 16:36:06
【问题描述】：

我正在使用 ASP .NET MVC 4 和在 IIS 上运行的 React / React Router 设置一个简单的应用程序。在我的本地 IIS express（由 Visual Studio 启动的实例）上运行时一切正常，但是当尝试在生产环境中运行时，我得到一个空白页。 没有 JS 错误或 404，包正在正确加载但未执行。

我完全不知道为什么这会在由 VS2013 启动的本地 IIS 中工作，但在将项目移动为在现有 IIS 网站上作为应用程序运行时却没有运行。任何和所有的帮助将不胜感激。

我在RouteConfig.js 中只设置了一条包罗万象的路线，使用View() 为Index.cshtml 提供服务：

routes.MapRoute(
    name: "Default",
    url: "{*url}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

我的单.cshtml文件是：

<div id="app"></div>
@Scripts.Render("~/Scripts/dist/bundle.js")

而我的webpack.config.js 文件是：

const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, './src/js/App.jsx'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    resolve: {
        alias: {
            Components: path.resolve(__dirname, './src/js/components'),
            Pages: path.resolve(__dirname, './src/js/pages'),
            Util: path.resolve(__dirname, './src/js/util'),
            Styles: path.resolve(__dirname, './src/scss/'),
        }
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
        ]
    }
};

【问题讨论】：

标签： asp.net reactjs iis webpack

【解决方案1】：

原来这不是我的配置问题，而是我的 React Router 问题。开发站点的基本 URL 只是“/”，但我部署到的版本的基本 URL 是“/appName”。设置我的 BrowserRouter 的“basename”属性解决了这个问题。

【讨论】：