web.config failed to rewrite index.html when a baseURL is added to sub directory in Vue 3 app with Vite

Question

Currently working on a Vue 3 app which deployed using Azure web apps. When I deployed it to the root and used web.config it worked fine, But I need to add a Base URL. For that, I have added the following for the vite.config:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue

export default defineConfig({
  plugins:[vue()],
  base: 'sub-url'
})

But this failed to rewrite.

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="/sub-url/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Documentation

Currently I'm using Hash Mode as a workaround but I need to use HTML version. The app works in Hash mode and locally without any errors.

Suresh Chikkam · Accepted Answer · 2024-07-17 12:14:29Z

0

Here you need to Configure the web.config to handle the HTML5 history mode and rewrite URLs correctly, Especially when using a subdirectory.

Any request starting with /sub-url/ is rewritten to /sub-url/index.html.

Check the below web.config for a Vue 3 app deployed in a subdirectory using Vite.

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="^(sub-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="/sub-url/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Vue Router is configured to use the same base URL.

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory('/sub-url/'), // Use the same base URL
  routes,
})

export default router

Configure the base URL with a leading and trailing slash.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/sub-url/', // Ensure leading and trailing slash
})

Result:

enter image description here

answered Jul 17, 2024 at 12:14

Suresh Chikkam

3,5822 gold badges5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Avish95 Over a year ago

I did the same thing yet it does not work. It throws a 500 error, 'The page cannot be displayed because an internal server error has occurred'

Suresh Chikkam Over a year ago

please refresh or restart your app once it re-deployed.

Collectives™ on Stack Overflow

web.config failed to rewrite index.html when a baseURL is added to sub directory in Vue 3 app with Vite

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related