How to run a VueJS application in ASP.NET core using NPM

Question

I Have a blank asp.net core 5 web application and I have used npm to install vue3 and scaffold one of the default setups. It creates a directory for the app in the projects root directory and in the new app folder I set the vue.config.js file build route to the projects wwwroot folder using the following:

const path = require("path");

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

This works and my npm run build does in fact save to a wwwroot folder however it deletes the current wwwroot folder in visual studio and creates a new wwwroot folder. The problem is the globe next to the wwwroot disappears when it is recreated and it is just a folder icon. Not sure how important that is but strange that happens

I next go into the startup.cs and add

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

Now when I go to run this project it loads a blank page but if I go to the url https://localhost:44391/wwwroot/ it loads just a menu with Home and About at the top and if I click home it takes me to https://localhost:44391/ with the correct vue home template. I do have the standard router setup but I have not changed any of that and history mode was set as yes during the vue installation if that matters. I am not sure why this is not working correctly. Do I need to add UseContentRoot() in program.cs or something?

Have you created an asp.net core project with spa template to have a look.Based on your description, it is not clear what your startup.cs code.You 'd better show steps to reproduce and give the result you want.Generally, we have ClientApp outside of wwwroot to put building files , and add spa configs in startup.cs stackoverflow.com/a/55989907/10158551 — Ryan
– Ryan, Commented Jan 13, 2022 at 6:35

Ryan · Accepted Answer · 2022-01-13 06:45:43Z

If you want to run asp.net core project with vue application, in your case , your startup.cs may refer to below setting:

(Install Package Microsoft.AspNetCore.SpaServices.Extensions choose Version as 5.x firstly)

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
            //    {
            //    }
            //}
        });
    }
}

Collectives™ on Stack Overflow

How to run a VueJS application in ASP.NET core using NPM

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related