VueJs Url Rewrite Error when hosting on IIS with ASP.net Core 2.0 application

Question

I am hosting vuejs app inside WWWROOT folder of Asp.net Core 2.0 App.

When i try to run the application with the url:

https://admin.myapp.com or https://admin.myapp.com/index, when https://admin.myapp.com is hit on the browser the application should be redirected to ../index but nothing is happening. Their is always a below error on the browser console.

manifest.c93377026a31fd19d204.js:1 Uncaught SyntaxError: Unexpected token < vendor.ce0b0308730c78917196.js:1 Uncaught SyntaxError: Unexpected token < app.09cbf8437d50e73c0697.js:1 Uncaught SyntaxError: Unexpected token <

I am rewriting the URL as follows in the web config files of the application.

Web Config Outside the wwwroot folder.

My Startup class:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{

    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();
    loggerFactory.AddSerilog();

    //app.UseHangfireDashboard();
    //app.UseHangfireServer();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    InitializeAsync(app.ApplicationServices, CancellationToken.None).GetAwaiter().GetResult();

    app.UseCors("CorsPolicy");
    app.UseAuthentication();


    app.UseDefaultFiles();
    app.UseStaticFiles();

    //app.UseMiddleware(typeof(ErrorHandlingMiddleware));
    app.UseMvc();
}

In VueJs i am using history mode.

This is the small piece of code which i am using in my Route.js

const router = new Router({
  mode: "history",
  linkActiveClass: "open active",
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: "/",
      redirect: "/index",
      name: "Home",
      component: Full

When i try browsing the app using the URL(api URL) like

https://admin.myapp.com/account/getdata https://admin.myapp.com/api/list/state

the data are populated correctly.

Any Suggestion or Help will be appreciated.

user_3811265 · Answer

I used the below code on web config which solved my problem above. I have posted all the tag here as the answer. Hopefully this will help someone with the similar problem.

You can read more here at the blog.

user_517016 · Answer

I think the issue here is that Vue, by default, is assuming that your app is hosted at the base of your domain (https://admin.myapp.com). But when you deploy it as part of an ASP.NET project, it ends up sitting in a folder (https://admin.myapp.com/wwwroot). When the application files are being requested, they are not being detected as existing files by IIS Rewrite (because they aren't - relative to the base) and are being rewritten to index.html.

Try changing the baseUrl value in your Vue config to '/wwwroot/'.

(NOTE: The application I'm working on actually had a separate API project/site, so my solution was to just host the Vue frontend directly rather than embed it in an ASP.NET project. Pretty sure this is the answer, though.)

VueJs Url Rewrite Error when hosting on IIS with ASP.net Core 2.0 application

2 Answers