Htykuut

I have setup my vue project to have 2 different pages, using the vue-cli 3 multi page configuration and it works fine in my dev environment (using history mode)

Now I am trying to deploy the app on IIS and its not quite working. There is nothing in the docs on how to set this up and I’m wondering if anyone here could help?

My Guess is that I have to add a second IIS url rewrite rule to channel requests to the right page but I can’t get it to work.

<rule name="Go to Dashboard" stopProcessing="true">

    <match url="(.*/bd/?.*)" />

    <conditions logicalGrouping="MatchAll">

        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

    </conditions>

    <action type="Rewrite" url="/Dashboard/index.html" />

</rule>

<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>

Think I figured it out.

<rule name="Go to Dashboard" stopProcessing="true">

    <match url="(.*)" />

    <conditions logicalGrouping="MatchAll">

        <add input="{REQUEST_URI}" pattern="(.*/bd/?.*)" negate="false" />

    </conditions>

    <action type="Rewrite" url="/Dashboard/" />

</rule>

<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" />

        <add input="{REQUEST_URI}" pattern="(.*/bd/?.*)" negate="true" />

    </conditions>

    <action type="Rewrite" url="/" />

</rule>

It also important to use a separate template in vue config with the right in the header

   pages: {

    index: {

      entry: 'src/Landing/main.js',

      template: 'public/index.html',

      filename: 'index.html',

      title: 'Index Page',

      chunks: ['chunk-vendors', 'chunk-common', 'index']

    },

    dashboard: {

      entry: 'src/Dashboard/main.js',

      template: 'public/bd.html',

      filename: 'Dashboard/index.html',

      title: 'Dashboard',

      chunks: ['chunk-vendors', 'chunk-common', 'dashboard']

    },

  },