如何使用 NPM 在 ASP.NET Core 中运行 VueJS 应用程序答案

【问题标题】：How to run a VueJS application in ASP.NET core using NPM如何使用 NPM 在 ASP.NET Core 中运行 VueJS 应用程序
【发布时间】：2022-01-12 15:13:17
【问题描述】：

我有一个空白的 asp.net core 5 web 应用程序，我使用 npm 安装了 vue3 并搭建了默认设置之一。它在项目根目录和新的应用程序文件夹中为应用程序创建一个目录，我使用以下命令将 vue.config.js 文件构建路径设置为项目 wwwroot 文件夹：

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../wwwroot"),
  assetdir: "../wwwroot"
}

这有效，我的 npm run build 实际上保存到 wwwroot 文件夹，但是它删除了 Visual Studio 中当前的 wwwroot 文件夹并创建了一个新的 wwwroot 文件夹。问题是 wwwroot 旁边的地球在重新创建时消失了，它只是一个文件夹图标。不知道这有多重要，但奇怪的是发生了

我接下来进入 startup.cs 并添加

        app.UseDefaultFiles(); // Enables default file mapping on the web root.
        app.UseStaticFiles();

现在，当我运行这个项目时，它会加载一个空白页面，但是如果我转到 URL https://localhost:44391/wwwroot/ 它只会加载一个顶部有 Home 和 About 的菜单，如果我点击 home它使用正确的 vue home 模板将我带到 https://localhost:44391/。我确实有标准的路由器设置，但我没有更改任何设置，并且在 vue 安装期间历史模式设置为是，如果这很重要的话。我不确定为什么这不能正常工作。我需要在 program.cs 中添加 UseContentRoot() 吗？

【问题讨论】：

你用spa模板创建了一个asp.net核心项目看看。根据你的描述，不清楚你的startup.cs代码是什么。你最好显示步骤来重现和给出你想要的结果。一般来说，我们在wwwroot 之外有ClientApp 来放置构建文件，并在startup.cs 中添加spa 配置stackoverflow.com/a/55989907/10158551

标签： vue.js asp.net-core asp.net-core-mvc vuejs3

【解决方案1】：

如果你想用 vue 应用程序运行 asp.net core 项目，在你的情况下，你的startup.cs 可以参考以下设置：

(安装包Microsoft.AspNetCore.SpaServices.Extensions首先选择版本为5.x)

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSpaStaticFiles(configuration => { configuration.RootPath = "wwwroot"; });
        services.AddRazorPages();
    }

 
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      
        app.UseStaticFiles();
        if (!env.IsDevelopment())
        {
            app.UseSpaStaticFiles();
        }

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot";
            //if (env.IsDevelopment())
            //{
            //    try
            //    {
            //        spa.UseProxyToSpaDevelopmentServer("http://localhost:1234/");
            //    }
            //    catch
            //    {
            //    }
            //}
        });
    }
}

【讨论】：