如何使用Endpoints在ASP.NET Core中通过VueJS处理路由？

Question

正在尝试在后端使用ASP.NET核心创建VueJS SPA

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

dotnet new react

并用Vue应用程序交换了ClientApp

rm -rf ClientApp
vue create frontend

除了一件东西外，其他所有东西都工作正常

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

无法获取/关于

如果我在浏览器中输入URL并直接访问，也是如此

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

现在，Vue Router通过Javascript处理路由，因为它在后台使用＃！哈希，因此ASP.NET Router尝试将URL匹配到AboutController @ index，因此该URL不存在，因此是404

[研究表明，我应该在Startup.cs中为SPA路由器设置一个通配符回退，但是我找到的所有答案都是here，here，here，this question，answer here，this question和this one正在使用app.UseMvc()，但我没有启用它，而是使用app.UseEndpoints

我也尝试搜索GitHub，但相同的results

[This Answer建议我也坚持使用app.UseEndPoints和Microsoft migration guide

[The Vue Router Documentation讨论了这个问题，并为使用IIS的web.config为.NET应用程序（如答案here）提出了解决方案，但它在Linux机器上运行Kestrel服务器，因此无效）>

这是我的Startup.cs文件

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");
                }
            });
        }
    }
}
我将此应用程序推送到GitHub here，以便于在忘记了某些内容的情况下轻松重现

如何获得相同的效果

app.UseMvc(routes =>
{
  routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}");
  routes.MapRoute("spa-fallback", "{*anything}", new { controller = "Home", action = "Index" });
});
使用app.UseEndpoints？

---

只要有必要，这是我的Vue路由器

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import NotFound from './views/NotFound.vue'

Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
        },
        {
            path: '/forecast',
            name: 'forecast',
            component: () => import( /* webpackChunkName: "forecast" */ './views/Forecast.vue')
        },
        {
            path: '*',
            component: NotFound
        }
    ]
})

正在尝试在后端使用ASP.NET核心创建VueJS SPA，因为dotnet SDK版本3.0.100不再支持Vue，所以我创建了一个React应用dotnet新的react，并用Vue交换了ClientApp ...

Answer 1

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