可以做水果的团购网站有哪些,优区生活app官方下载,深喉咙企业网站系统,网站建设以后就业方向前言默认情况下#xff0c;Visual Studio提供了“基于Vue.js Web 应用程序”项目模板#xff0c;可以生成Vue.js前端项目。你需要另外创建Web API项目#xff0c;调试时需要同时启动2个项目#xff0c;然后还要解决前后端集成带来的问题#xff0c;比如跨域访问。如果Visual Studio提供了“基于Vue.js Web 应用程序”项目模板可以生成Vue.js前端项目。你需要另外创建Web API项目调试时需要同时启动2个项目然后还要解决前后端集成带来的问题比如跨域访问。如果能将前后端集成到一个项目就好了项目模板利用“Vue JS 3.0 with .NET 5 Web API”项目模板我们很容易创建Vue.jsWeb 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“
