Host VueJs 3 on IIS Virtual Directory

Question

I'm new to vuejs. I developed aspnet core api with vuejs as frontend. my application works fine locally but having difficulty to have it deployed on IIS for a specific configuration.

On IIS for my application(say abc.com) files directory is like following

And on IIS it should appear as follows

can someone help with the steps required to configure this as above?

Only way I was able to configure and run this application by following steps below

1. create a new website from IIS, point to the App folder
2. once website is created right click on the website and add application and point to the api folder
3. create a web.config file to use rewrite url but above approach changes the IIS view as following and I don't have permission to do that

thanks in advance for reading this post.

UPDATE:

when I try access abc.com/app/welcome from browser, I can see css and js files are still looking inside root directory

I used a web.config file inside "App" directory. following url rewrite I used

      <rule name="Handle 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" />
          <add input="{REQUEST_URI}" pattern="^/(Api)" negate="true" />
          
        </conditions>
      <action type="Rewrite" url="/" />
    </rule>

thanks again for your time on this