Vue3+Vite部署Azure Web Apps：添加baseURL后web.config重写失败

步骤1：修正Vite的Base URL配置 #

将vite.config.js中的base改为带前后斜杠的绝对子路径，确保资源和路由都以正确的子路径加载：

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

export default defineConfig({
  plugins: [vue()],
  base: '/sub-url/' // 前后添加斜杠，指定绝对子路径
})

步骤2：更新Vue Router配置（若未设置） #

确保Vue Router使用Vite的BASE_URL自动匹配子路径，避免路由跳转异常：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // 你的路由定义
  ]
})

export default router

步骤3：修改web.config的重写规则 #

替换原有的web.config内容，添加针对子路径的重定向和history模式处理规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 统一子路径结尾斜杠，避免路径不一致 -->
        <rule name="Redirect sub-url to trailing slash" stopProcessing="true">
          <match url="^sub-url$" />
          <action type="Redirect" url="/sub-url/" />
        </rule>
        <!-- 处理子路径下的非文件/目录请求，重写到入口文件 -->
        <rule name="Handle Vue History Mode for sub-url" 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>

关键说明 #

• 原vite.config的base: 'sub-url'是相对路径，会导致资源加载路径混乱，改为绝对子路径后，所有静态资源、路由都会以/sub-url/开头。
• 原web.config规则匹配所有路径并重写到/sub-url/，但未指向入口文件index.html，服务器无法正确返回Vue应用；新规则仅针对/sub-url/下的请求，确保非文件/目录请求都转发到入口文件，让Vue Router处理路由。
• 斜杠重定向规则是为了避免/sub-url和/sub-url/两种路径导致的资源加载不一致问题。

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