fix(html): transform relative path with long base in /index.html

packages/vite/src/node/__tests__/utils.spec.ts

@@ -1,4 +1,5 @@
 import fs from 'node:fs'
+import path from 'node:path'
 import { describe, expect, test } from 'vitest'
 import {
   asyncFlatten,
@@ -9,6 +10,7 @@ import {
   isFileReadable,
   isWindows,
   posToNumber,
+  processSrcSetSync,
   resolveHostname,
   shouldServe
 } from '../utils'
@@ -270,3 +272,15 @@ describe('isFileReadable', () => {
     })
   }
 })
+
+describe('processSrcSetSync', () => {
+  test('prepend base URL to srcset', async () => {
+    const devBase = '/base/'
+    expect(
+      processSrcSetSync(
+        './nested/asset.png 1x, ./nested/asset.png 2x',
+        ({ url }) => path.posix.join(devBase, url)
+      )
+    ).toBe('/base/nested/asset.png 1x, /base/nested/asset.png 2x')
+  })
+})

packages/vite/src/node/server/middlewares/indexHtml.ts

@@ -94,20 +94,16 @@ const processNodeUrl = (
   const devBase = config.base
   if (startsWithSingleSlashRE.test(url)) {
     // prefix with base (dev only, base is never relative)
-    const fullUrl = joinUrlSegments(devBase, url)
+    const fullUrl = path.posix.join(devBase, url)
     overwriteAttrValue(s, sourceCodeLocation, fullUrl)
   } else if (
     url.startsWith('.') &&
     originalUrl &&
     originalUrl !== '/' &&
     htmlPath === '/index.html'
   ) {
-    const replacer = (url: string) =>
-      path.posix.join(
-        devBase,
-        path.posix.relative(originalUrl, devBase),
-        url.slice(1)
-      )
+    // prefix with base (dev only, base is never relative)
+    const replacer = (url: string) => path.posix.join(devBase, url)
 
     // #3230 if some request url (localhost:3000/a/b) return to fallback html, the relative assets
     // path will add `/a/` prefix, it will caused 404.