Question

.Net Core的新手，已经启动了一个基于.NET Core React Redux模板构建的新项目。该应用程序通过VS2017正常运行我已经通过VS2017构建了一个文件夹发布（调试配置）。出版似乎进展顺利。当点击发布的网站时，我的js和css文件得到404.

Chrome Dev Tools

Index.html看起来像这样：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <meta name="theme-color" content="#000000"><base href="/"/
        ><link rel="manifest" href="/manifest.json">
        <link rel="shortcut icon" href="/favicon.ico">
        <title>nSITE Explorer</title>
        <link href="/static/css/main.872a5e7a.css" rel="stylesheet">
        <link href="/static/css/main-cssmodules.7f40876c.css" rel="stylesheet">
    </head>
    <body>
        Test
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script type="text/javascript" src="/static/js/main.735c95d1.js"></script>
    </body>
</html>

我确实看到了HTML中的“测试”一词。

以下是服务器上文件结构的一部分： file structure

如果我将html中的src属性更改为：

<body>
    Test
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="explorer2/ClientApp/build/static/js/main.735c95d1.js"></script>
</body>

刷新网站我得到200。 result with altered index.html

但那200的反应是...... HTML？ response from 200

如果它有帮助，这是我的Startup.cs。

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using System;
using Windsor.Site.Code;
using System.Net;
using Microsoft.AspNetCore.Diagnostics;
using Microsoft.AspNetCore.Http;
using Swashbuckle.AspNetCore.Swagger;
using System.Reflection;
using Windsor.Site.Controllers;
using System.IO;

namespace Windsor.Site
{
    public class Startup
    {
        private static readonly log4net.ILog log = log4net.LogManager.GetLogger(typeof(Startup));
        public IConfiguration Configuration { get; }

        public Startup(IHostingEnvironment env)
        {
            var configurationBuilder = new ConfigurationBuilder()
                .SetBasePath(Directory.GetCurrentDirectory())
                .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
                .AddEnvironmentVariables();

            Configuration = configurationBuilder.Build();
            // If we want to pull these from the db we can so an ado call right here
        }


        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddScoped<IAppSettingsRepository, AppSettingsRepository>();
            services.AddScoped<ILayerRepository, LayerRepository>();
            services.AddScoped<IProfileRepository, ProfileRepository>();
            services.AddScoped<ISiteRepository, SiteRepository>();
            services.AddSingleton<IConfiguration>(Configuration);

            services.AddMvc();

            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new Info
                {
                    Version = "v1",
                    Title = "nSite Explorer API",
                    Description = "List of API for nSite Explorer"
                });
                c.IncludeXmlComments(GetXmlCommentsPath());
                c.DescribeAllEnumsAsStrings();
            });

            // In production, the React files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/build";
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            // Should be the first item in Configure so we can catch exceptions from the other items
            app.UseExceptionHandler(
                 options =>
                 {
                     options.Run(
                         async context =>
                                {
                                    var ex = context.Features.Get<IExceptionHandlerFeature>();
                                    // Log the error
                                    log.Error("An unhandled exception occurred.");
                                    log.Error("Request Path : " + context.Request.Path);
                                    log.Error("Exception Message : " + ex.Error.Message);
                                    if (ex.Error.InnerException != null)
                                    {
                                        log.Error("Inner Exception : " + ex.Error.InnerException.Message);
                                    }
                                    log.Error("Exception Stack Trace : " + ex.Error.StackTrace);

                                    // Return the error to the client
                                    context.Response.StatusCode = (int)HttpStatusCode.InternalServerError;
                                    context.Response.ContentType = "text/html";

                                    if (ex != null)
                                    {
                                        var err = $"<h1>Error: {ex.Error.Message}</h1>";
                                        await context.Response.WriteAsync(err).ConfigureAwait(false);
                                    }
                                }
                    );
                 });

            // Enable middleware to serve generated Swagger as a JSON endpoint.
            app.UseSwagger();
            // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.), 
            // specifying the Swagger JSON endpoint.
            app.UseSwaggerUI(c =>
            {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "nSite Explorer API V1");
            });

            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            //app.UseIdentity();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
            });
        }
        private string GetXmlCommentsPath()
        {
            var commentsFileName = Assembly.GetExecutingAssembly().GetName().Name + ".xml";
            return System.IO.Path.Combine(AppContext.BaseDirectory, commentsFileName);
        }
    }
}

任何人都对为什么会这样做有任何想法？提前谢谢。

Answer 1

我知道这是一个旧线程，但是在最近遇到此问题之后，我设法对其进行了跟踪。现在，这里存在一个尚未解决的问题：https://github.com/dotnet/aspnetcore/issues/24338

部署时出现.NET Core React Redux模板JS 404问题

1 个答案: