Vue.js served under IIS unable to find asset files

Question

UPDATE

After digging a bit further, I think the issue is related to the fact that referencing assets such as CSS files, e.g. href="/css/style.css" IIS will resolve it by navigating to the server's root folder, rather than application's root folder, e.g. localhost/myapp/css/style.css. However it seems to only occur when running Vue app, when I "deployed" raw html file in its own application, CSS and JS file paths were resolved correctly.

ORIGINAL POST

I have developed a sample to-do app in Vue.js with vue-router. When served using VUE CLI it works as expected, however when I built and put the files from dist folder under IIS application, I'm getting the errors which indicate that the server tries to find the asset files (such as css and js) at the localhost root, instead of localhost/todos. Example of errors:

 http://localhost/css/app.45a2082d.css net::ERR_ABORTED 404 (Not Found)
 http://localhost/js/app.34c2e8cc.js net::ERR_ABORTED 404 (Not Found)

I followed the steps for IIS specified here on the official website, i.e. installed IIS UrlRewrite and included the web.config, however I'm getting the same results. Included web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

As a workaround, I tried creating a new ASP.Net core application. I put all the built asset files, including index.html under wwwroot folder and added the following middleware in the Startup.cs:

app.UseFileServer();
app.Run(async (context) => {
    await context.Response.SendFileAsync(env.ContentRootPath + "/wwwroot/index.html");
});

This works as expected when launched through IIS Express, i.e. it loads the index.html file which in turn correctly loads all other assets. The routes are working correctly as I'm able to switch between the pages/routes (Home and About). However when I publish this web application and put it under IIS with the updated web.config file (the aforementioned URL rewrite rules + .Net Core specific configuration) I'm getting the same problem- the IIS seems to try loading assets from the root localhost locations.

How can I tell IIS to looks for the asset files at the root location of the application (i.e. iinetpub\wwwroot\Todos), and NOT at localhost's root?

My built dist files and directories look as follows:

• index.html
• css/app.45a2082d.css
• js/app.34c2e8cc.js

vue-router configuration:

export default new Router({
    mode: "history",
    routes: [
        {
            path: "/",
            name: "home",
            component: Home
        },
        {
            path: "/about",
            name: "about",
            component: About
        }
    ]
});

Am I missing something else in the IIS config? Why would it work under IIS Express but not under system's IIS? Is the problem elsewhere?

Answer 1

It turned out that I had to configure Vue to set the baseUrl and match the application's path. In vue.config.js:

module.exports = {
    baseUrl: '/todos'
};