SPA 默认页面中间件无法 return 默认页面 - asp net core 5 和 webpack dev server

Question

我很难让 SpaProxyingExtensions.UseProxyToSpaDevelopmentServer 与 webpack-dev-server 一起工作，但找不到合适的配置。

控制台报错

System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.

捆绑过程并不复杂，webpack 会将东西转储到 wwwroot/dist 文件夹。

我在这里想念什么？

感谢您的帮助。

文件夹结构

package.json

  "dependencies": {
    "@types/react": "^17.0.19",
    "@types/react-dom": "^17.0.9",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.6",
    "axios": "^0.21.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.2",
    "react-intl": "^5.10.4",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {,
    "@types/node": "^14.14.7",
    "@typescript-eslint/eslint-plugin": "^4.8.1",
    "@typescript-eslint/parser": "^4.8.1",
    "clean-webpack-plugin": "3.0.0",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.2.0",
    "node-gyp": "8.0.0",
    "node-sass": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "react-hot-loader": "^4.13.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "ts-loader": "^9.2.5",
    "ts-node": "8.5.4",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.3.5",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^5.8.0"
  }

webpack.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
    target: "web",
    mode: "development",
    stats: "normal",
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        filename: "[name].js",
        publicPath: "/dist/",
    },
    devServer: {
        hot: true,
        historyApiFallback: true,
        static: {
            directory: path.resolve(__dirname, "wwwroot"),
            publicPath: "/",
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            {
                template: "index.html",
                favicon: "./src/favicon.ico",
                inject: false,
                minify: false,
                title: "test app"
            }
        ),
    ]
}

csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
        <LangVersion>9.0</LangVersion>
        <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
        <TypeScriptToolsVersion>4.0</TypeScriptToolsVersion>
        <Nullable>enable</Nullable>
        <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
    </PropertyGroup>
</Project>

launchSettings.json

"profiles": {
   "TestApp": {
        "commandName": "Project",
        "launchBrowser": false,
        "applicationUrl": "https://0.0.0.0:7504"
   }
}

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddSpaStaticFiles(configuration => configuration.RootPath = $"wwwroot/dist");
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    ...

    app.UseSpa(opts =>
    {
        if (env.IsDevelopment())
        {
            opts.Options.SourcePath = "dist";
            opts.UseProxyToSpaDevelopmentServer("https://localhost:8080");
        }
  });
}

Answer 1

我解决了错误。这是一件小傻事。确保 ASPNETCORE_ENVIRONMENT 环境变量在全局或在 launchSettings

中定义

launchSettings.json

{
  "profiles": {
    "Test": {
      "commandName": "Project",
      "dotnetRunMessages": "true",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

SPA 默认页面中间件无法 return 默认页面 - asp net core 5 和 webpack dev server

The SPA default page middleware could not return the default page - asp net core 5 and webpack dev server

asp.net-core

webpack

webpack-dev-server

asp-net-core-spa-services