如何使用端点在 ASP.NET 核心中通过 VueJS 处理路由？

Question

我正在尝试在后端创建一个带有 ASP.NET 核心的 VueJS SPA

由于dotnet SDK版本3.0.100不再支持 Vue，我创建了一个 React 应用程序

dotnet new react

并ClientApp与 Vue 应用程序交换

rm -rf ClientApp
vue create frontend

除了一件事，一切都完美无缺

每当我启动应用程序http://localhost:5000并单击任何 Vue Router 链接时，说http://localhost:5000/about（它有效）但如果我刷新，我会得到预期的404

无法获取/关于

如果我在浏览器中输入 URL 并直接访问，也会发生同样的情况

值得注意的是，默认的 React 应用程序没有遇到这个问题，我使用这个工具比较了两个 ASP.NET 应用程序的文件之间的所有内容，没有发现任何差异

现在 Vue Router 通过 Javascript 处理路由，因为它在幕后使用 #!hash，因此 ASP.NET 路由器尝试将 URL 与不存在的 AboutController@index 匹配，因此 404

研究表明我应该设置一个通配符回退到 SPA 路由器Startup.cs，但是我在这里找到的所有答案，这里，这里，这个问题，这里的答案，这个问题和这个问题都在使用app.UseMvc()，我没有启用，我我使用app.UseEndpoints替代

我也尝试搜索 GitHub 但结果相同

这个答案建议我坚持app.UseEndPoints和微软迁移指南太

Vue Router 文档讨论了这个问题，并为使用web.config IIS 的.NET 应用程序提出了一个解决方案，就像这里的答案一样，但我在 Linux 机器上运行 Kestrel 服务器，所以这不起作用

这是我的Startup.cs 文件

dotnet new react

我把这个程序的GitHub这里，可以很容易复制，以防万一我忘了什么事

我怎样才能达到同样的效果

rm -rf ClientApp
vue create frontend

使用app.UseEndpoints?

---

以防万一这是相关的，这是我的 Vue 路由器

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;

namespace spa
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {

            services.AddControllersWithViews();

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

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseSpaStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

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

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "serve:bs");
                }
            });
        }
    }
}

Answer 1

尝试这个模板https://github.com/SoftwareAteliers/asp-net-core-vue-starter。它最近更新并支持 .Net Core 3.0 和 Vue CLI 3.0。