fix: SSR with relative base (#8683)

Author: patak-dev

packages/vite/src/node/config.ts

@@ -483,7 +483,15 @@ export async function resolveConfig(
   // resolve public base url
   const isBuild = command === 'build'
   const relativeBaseShortcut = config.base === '' || config.base === './'
-  const base = relativeBaseShortcut && !isBuild ? '/' : config.base ?? '/'
+
+  // During dev, we ignore relative base and fallback to '/'
+  // For the SSR build, relative base isn't possible by means
+  // of import.meta.url. The user will be able to work out a setup
+  // using experimental.buildAdvancedBaseOptions
+  const base =
+    relativeBaseShortcut && (!isBuild || config.build?.ssr)
+      ? '/'
+      : config.base ?? '/'
   let resolvedBase = relativeBaseShortcut
     ? base
     : resolveBaseUrl(base, isBuild, logger, 'base')

packages/vite/src/node/plugins/asset.ts

@@ -105,7 +105,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       ) => {
         return base.runtime
           ? `"+${base.runtime(JSON.stringify(filename))}+"`
-          : base.relative
+          : base.relative && !config.build.ssr
           ? absoluteUrlPathInterpolation(filename)
           : JSON.stringify((base.url ?? config.base) + filename).slice(1, -1)
       }

packages/vite/src/node/plugins/css.ts

@@ -469,7 +469,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         chunkCSS = chunkCSS.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
-          if (assetsBase.relative) {
+          if (assetsBase.relative && !config.build.ssr) {
             // relative base + extracted CSS
             const relativePath = path.posix.relative(cssAssetDirname!, filename)
             return relativePath.startsWith('.')
@@ -488,7 +488,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           )
           chunkCSS = chunkCSS.replace(publicAssetUrlRE, (_, hash) => {
             const publicUrl = publicAssetUrlMap.get(hash)!
-            if (publicBase.relative) {
+            if (publicBase.relative && !config.build.ssr) {
               return relativePathToPublicFromCSS + publicUrl
             } else {
               // publicBase.runtime has no effect for assets in CSS

packages/vite/src/node/plugins/worker.ts

@@ -338,7 +338,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
           } else {
             // Relative base
             let outputFilepath: string
-            if (assetsBase.relative) {
+            if (assetsBase.relative && !config.build.ssr) {
               outputFilepath = path.posix.relative(
                 path.dirname(chunk.fileName),
                 filename