一键生成Vue.js + Web API前后端集成项目

Posted 2021-12-31 dotNET跨平台

前言

默认情况下，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“