Is there a way to serve vue.js statc file with .NET MVC?

Client-side routing in an ASP.NET app

Late response, but sharing because the simple answer was so hard to find. The use of UseStaticFiles() is well-documented and will work for SPAs until the page is refreshed or the app is accessed with a direct url. To enable client-side routes, a fallback path can be configured to pass any unresolved server-side routes to the client app.

Brief instructions

Assuming your Vue app (or any SPA) is copied into a root directory named wwwroot:

In Startup.cs, in Configure(), Add UseDefaultFiles() and UseStaticFiles() so that index.html can be found and served.

The key to supporting client-side routing is to add a fallback endpoint to UseEndpoints(). Any route not handled server-side will be passed to the client app and successfully routed.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  app.UseHttpsRedirection();

  // Important: UseDefaultFiles() before UseStaticFiles()
  app.UseDefaultFiles();
  app.UseStaticFiles();

  app.UseRouting();

  app.UseEndpoints(endpoints =>
  {
     endpoints.MapControllers();
     // Routing magic: Pass route to client app
     endpoints.MapFallbackToFile("/index.html");
  });
}

Reference: https://weblog.west-wind.com/posts/2020/Jul/12/Handling-SPA-Fallback-Paths-in-a-Generic-ASPNET-Core-Server

I found a solution for this:

We can easily use any sample vue app created with the vue-cli. Because this is really a matter of serving static files via a HTTP server, which would work in .NET MVC.

1. Create your vue app anywhere within your project. Personally I would advise you to create it at the root level of your .net mvc project.

2. Add a vue.config.js file and specify the publicPath which will determine where the path of the folder where all static files will be generated.

3. Add a controller to serve the static files that will be created by the vue app.

For best practices, make sure that the name of your controller has the same name as the name of the folder specified in the publicPath.

Example:

vue.config.js

module.export = {
  publicPath:'~/Dist'
}

public class DistController : Controller {

}

4. ONLY APPLICABLE IF YOU HAVE VUE ROUTER IN YOUR APP:

For every route you defined in vue-router, make sure you have an Action method of the same name as the path of that route. Each method needs to return the static html or cshtml file that was generated.

NOTE: for your main component, make sure you use a custom path name ie (not using '/')

Example:

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

public class DistController : Controller {

        public ActionResult home()
        {
          return new FilePathResult("~/Html/index.html", "text/html");
        }


        public ActionResult about()
        {
          return new FilePathResult("~/Html/index.html", "text/html");
        }

        public ActionResult login()
        {
           return new FilePathResult("~/Html/index.html", "text/html");
        }

5. build your project for production:

At the time of this comment, you can use the following command to do this:

npm run build

The folder with all the static files will be generated.