前言
默认情况下，Visual Studio提供了“基于Vue.js Web 应用程序”项目模板，可以生成Vue.js前端项目。
你需要另外创建Web API项目，调试时需要同时启动2个项目，然后还要解决前后端集成带来的问题，比如跨域访问。
如果，能将前后端集成到一个项目就好了！
项目模板
利用“Vue JS 3.0 with .NET 5 Web API”项目模板，我们很容易创建Vue.js+Web API前后端集成项目。
首先，安装“Vue JS 3.0 with .NET 5 Web API”扩展：
安装成功后，在创建新项目窗口可以可以看到，多了“Vue JS 3.0 with .NET 5”项目模板：
项目结构
创建新项目，项目结构如下：
ClientApp目录下放置的就是Vue.js客户端代码，其他内容和普通WebAPI项目相同。
运行项目
无需配置，你可以直接运行它，它会自动运行npm install安装完所有npm包：
如果应用程序启动正常，将显示前端页面，访问FetchData页面，可以看到调用的是相同端口下的后端API：
发布项目
注意，模板代码有错误，设置的configuration.RootPath不对。
发布前需要修改Startup.cs，代码如下：
public Startup(IConfiguration configuration, IWebHostEnvironment env)
{Configuration = configuration;CurrentEnvironment = env;
}public IConfiguration Configuration { get; }
private IWebHostEnvironment CurrentEnvironment { get; set; }// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{services.AddControllers();services.AddSpaStaticFiles(configuration =>{if (CurrentEnvironment.IsDevelopment()){configuration.RootPath = "ClientApp";}else{configuration.RootPath = "ClientApp/dist";}});
}执行发布操作，它会自动执行npm run build,将前端代码编译输出到ClientApp/dist目录下，发布目录结构如下：
运行程序，访问FetchData页面，可以看到调用的还是相同端口下的后端API：
结论
使用“Vue JS 3.0 with .NET 5 Web API”项目模板，再也不怕怎么创建前后端集成项目了！
如果你觉得这篇文章对你有所启发，请关注我的个人公众号”My IO“
