Vue3+ASP.NET MVC：配置Vite指定资源目录且不修改URL

问题描述 #

我有一个由C# ASP.NET MVC控制器渲染的Vue3应用，访问路径为：

mydomain.com/AutomatedDemo/{apikey}/{contactid}

该应用通过vite.config.js部署，当前配置如下：

return {
      base: `/VueAutomatedDemo/dist/`,
      build: {
          sourcemap: true,
      },
      plugins: [
        vue(),
      ],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      },
      
    }

由于Vue3资源存放于VueAutomatedDemo/dist路径下，应用可正常加载，但加载后URL会被修改为：

mydomain.com/VueAutomatedDemo/dist/AutomatedDemo/{apikey}/{contactid}

此时应用运行正常，但无法刷新、重载，因为URL路径错误。需要配置vite.config.js，使其从VueAutomatedDemo/dist获取资源，同时保持URL为原路径mydomain.com/AutomatedDemo/{apikey}/{contactid}以确保ASP.NET MVC路由正确。

解决办法 #

1. 修改Vite配置文件 #

调整vite.config.js的base配置，并添加history模式的回退规则，保证资源加载路径正确的同时不干扰URL显示：

return {
      base: '/VueAutomatedDemo/dist/', // 保持资源从指定目录加载
      build: {
          sourcemap: true,
          // 若需要指定打包输出目录，可根据项目结构添加此行
          // outDir: '../VueAutomatedDemo/dist'
      },
      plugins: [vue()],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      },
      // 开发环境下的history回退规则，生产环境依赖后端配置
      server: {
        historyApiFallback: {
          rewrites: [
            { from: /^\/AutomatedDemo\/.*$/, to: '/index.html' }
          ]
        }
      }
    }

2. 配置Vue Router基础路径 #

如果Vue应用使用了Router的history模式，必须将路由的base设置为MVC的访问前缀/AutomatedDemo/，避免路由跳转时添加静态资源目录前缀：

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

const router = createRouter({
  history: createWebHistory('/AutomatedDemo/'), // 与MVC访问路径前缀保持一致
  routes: [
    // 你的路由配置列表
  ]
})

3. ASP.NET MVC端添加路由回退规则 #

刷新报错的核心原因是后端未配置回退规则，需要让所有/AutomatedDemo/开头的子路径请求都指向渲染Vue的控制器Action：

.NET Core 示例（Program.cs）

// 保留原有AutomatedDemo路由规则
app.MapControllerRoute(
    name: "automatedDemo",
    pattern: "AutomatedDemo/{apikey}/{contactid}",
    defaults: new { controller = "你的控制器名称", action = "渲染Vue的Action名称" });

// 添加SPA回退路由，处理刷新时的路径匹配
app.MapFallbackToController("渲染Vue的Action名称", "你的控制器名称");

传统ASP.NET MVC 示例（RouteConfig.cs）

// 保留原有AutomatedDemo路由规则
routes.MapRoute(
    name: "automatedDemo",
    url: "AutomatedDemo/{apikey}/{contactid}",
    defaults: new { controller = "你的控制器名称", action = "渲染Vue的Action名称" });

// 添加回退路由，覆盖所有AutomatedDemo子路径的刷新请求
routes.MapRoute(
    name: "spaFallback",
    url: "AutomatedDemo/{*path}",
    defaults: new { controller = "你的控制器名称", action = "渲染Vue的Action名称" });

4. 验证静态资源引用 #

Vue应用中的图片、样式等静态资源，Vite会根据base配置自动处理路径，无需手动修改，确保使用相对路径或Vite支持的引用方式即可。

核心逻辑 #

• Vite的base仅控制静态资源的加载路径，不会影响URL显示，之前的问题源于Vue Router基础路径未匹配MVC路由，加上后端未处理刷新的路由回退。
• 配置Vue Router的base为MVC访问前缀，可确保URL始终保持原结构。
• 后端添加回退路由，是为了让服务器在刷新时能正确返回Vue入口页面，避免因路径不匹配返回404错误。

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