Vite多页应用部署至子目录时嵌套页面静态资源导入路径异常问题

问题原因：base: './'配置会让所有资源路径统一使用相对于当前HTML文件的相对前缀，Vite默认不会根据HTML的嵌套层级动态调整前缀，所以才会出现嵌套页面路径错误的问题。

方案一：指定固定部署路径（推荐） #

如果明确知道应用最终部署的服务器子目录，直接将base设置为子目录的绝对路径即可，不需要额外处理：

export default defineConfig({
  // 示例：如果应用部署在 https://domain.com/my-project/ 就填写 '/my-project/'
  base: '/你的部署子目录名/',
})

该配置会让所有页面的资源路径统一生成/你的部署子目录名/assets/xxx格式，不管HTML嵌套多少层级，路径都能正确定位到资源。

方案二：动态生成相对路径（适用于部署路径不固定场景） #

如果无法提前确定部署路径，必须使用完全相对路径，可以添加自定义Vite插件，根据每个HTML文件的嵌套层级动态调整资源前缀：

import { defineConfig } from 'vite'

export default defineConfig({
  base: './',
  build: {
    rollupOptions: {
      // 配置多页应用入口
      input: {
        index: './index.html',
        nested: './nested/nested.html'
        // 其他入口继续往下加即可
      }
    }
  },
  plugins: [
    {
      name: 'fix-nested-html-assets-path',
      transformIndexHtml: {
        order: 'post',
        handler(html, context) {
          // 计算当前HTML相对于输出根目录的层级
          const pathSegments = context.path.split('/').filter(Boolean)
          const depth = pathSegments.length - 1
          const prefix = depth === 0 ? './' : '../'.repeat(depth)
          // 替换资源前缀
          return html.replace(/(\.\/assets)/g, `${prefix}assets`)
        }
      }
    }
  ]
})

配置完成后重新打包，嵌套页面的资源路径会自动适配对应层级的相对前缀，路径错误问题即可解决。

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