Vue + .NetCore前后端分离，不一样的快速发开框架

Vue.js 和 ASP.NET Core 是构建现代Web应用程序的流行技术栈。以下是一个简单的例子，展示如何将Vue.js前端与ASP.NET Core后端搭配使用。

1. 使用Vue CLI创建一个新的Vue项目：

vue create my-vue-app

2. 进入创建的Vue项目目录，并启动开发服务器：

cd my-vue-app
npm run serve

3. 在另一个目录中创建一个新的ASP.NET Core Web API项目：

dotnet new webapi -o my-dotnet-api

4. 将Vue项目的构建输出集成到ASP.NET Core项目中。在Vue项目目录中执行构建命令，并将生成的静态文件复制到ASP.NET Core项目的wwwroot目录：

npm run build
xcopy /E /I dist wwwroot

5. 修改ASP.NET Core项目中的Startup.cs，以便服务Vue应用程序的静态文件：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
 
    app.UseStaticFiles(); // 服务静态文件
 
    app.UseRouting();
 
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers(); // 路由API请求
 
        // 为Vue应用程序路由使用history模式的fallback
        endpoints.MapFallbackToFile("index.html");
    });
}

6. 在ASP.NET Core项目中配置CORS策略，允许前端应用跨域请求：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddDefaultPolicy(
            builder =>
            {
                builder.WithOrigins("http://localhost:8080") // Vue应用的URL
                       .AllowAnyHeader()
                       .AllowAnyMethod();
            });
    });
 
    services.AddControllers();
}

7. 在Startup.cs的Configure方法中应用CORS策略：

app.UseCors();

8. 启动ASP.NET Core应用程序：

dotnet run

现在，Vue.js前端应用会运行在一个端口（如8080），而ASP.NET Core后端会在另一个端口（如5000）上运行。前端发起的API请求会被路由到后端，从而实现前后端分离的Web开发。