Vue3+Vite部署IIS后路由异常：访问index.html无法加载默认组件

本地执行npm run dev运行正常，但部署到https://server_url/app_name路径后出现以下问题：

• 访问https://server_url/app_name/index.html时，<navigation-bar>和<footer-bar>正常显示，但<router-view>无法加载默认组件
• 直接访问https://server_url/app_name/则能正常显示所有内容

相关代码 #

App.vue #

<template>
  <div class="container-fluid fixed-main-container" style="padding: 0;">
    <navigation-bar></navigation-bar> 
    <router-view></router-view>
    <footer-bar></footer-bar>
  </div>
</template> 

router/index.js #

import { createRouter, createWebHistory } from 'vue-router'
import About from '../components/about.vue'
import Index from '../components/index.vue'
import Intro from '../components/intro.vue'
const routerBase =  process.env.NODE_ENV === 'development' ? "" : '/app_name/';
const routes=[
    {
        path: '/about',
        name: 'About',
        component: About,
        props: route => ({
          propOrgId: route.query.orgId,
          propStartDate: route.query.startDate,
          propEndDate: route.query.endDate
        }),
      },
      {
        path: '/',
        name: 'Index',
        component: Index,
        props: route => ({
          propOrgId: route.query.orgId,
          propStartDate: route.query.startDate,
          propEndDate: route.query.endDate
        }),
      },
      {
        path: '/intro',
        name: 'Intro',
        component: Intro,
        props: route => ({
          propOrgId: route.query.orgId,
          propStartDate: route.query.startDate,
          propEndDate: route.query.endDate
        })
      }
]
const router = createRouter({
    history: createWebHistory(routerBase),
    routes
  })
export default router

vite.config.js #

import { fileURLToPath, URL } from 'node:url'

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

export default defineConfig({
  base: process.env.NODE_ENV === 'development' ? "" : '/app_name/',
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

main.js #

import { createApp } from 'vue' 
import App from './App.vue'
import router from './router'

import { BootstrapVue3} from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
const app = createApp(App);

app.use(BootstrapVue3)
app.use(router);
app.mount('#app');

IIS重写规则（web.config） #

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Vue Router Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.html" appendQueryString="false" logRewrittenUrl="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

问题原因及解决方案 #

原因分析 #

访问/app_name/index.html时，Vue Router的createWebHistory会将当前URL路径解析为/index.html，无法匹配路由中默认的path: '/'规则，导致<router-view>加载失败。

解决方法 #

方法1：添加路由重定向规则

在路由数组中新增一条规则，将/index.html路径重定向到根路径：

const routes=[
    // 原有路由保持不变
    {
        path: '/index.html',
        redirect: '/'
    }
]

方法2：优化IIS重写规则

在web.config中添加一条优先执行的重定向规则，将index.html请求跳转至根路径：

<rule name="Redirect index.html to root" stopProcessing="true">
    <match url="^index\.html$" />
    <action type="Redirect" url="/app_name/" redirectType="Permanent" />
</rule>

将此规则放在原有Vue Router Routes规则的上方，确保优先触发。

方法3：确认生产环境打包配置

当前vite和路由的base路径配置已正确对应/app_name/，需确保执行npm run build时处于生产环境，避免base路径配置失效。

内容的提问来源于stack exchange，提问作者aaa