diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 2f50acfcdfa0fe..848d118ba0eb64 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -281,7 +281,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
             export default function WorkerWrapper() {
               const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
               try {
-                return objURL ? new ${workerConstructor}(objURL${workerOptions}) : new ${workerConstructor}("data:application/javascript;base64," + encodedJs${workerOptions});
+                return objURL ? new ${workerConstructor}(objURL) : new ${workerConstructor}("data:application/javascript;base64," + encodedJs${workerOptions});
               } finally {
                 objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
               }
diff --git a/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
index a09116c88a7ea6..828ece5ea27c5f 100644
--- a/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
+++ b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
@@ -5,7 +5,8 @@ import {
   getBg,
   getColor,
   isBuild,
-  page
+  page,
+  viteConfig
 } from '~utils'
 
 const absoluteAssetMatch = isBuild
@@ -137,7 +138,8 @@ describe('css url() references', () => {
 describe.runIf(isBuild)('index.css URLs', () => {
   let css: string
   beforeAll(() => {
-    css = findAssetFile(/index.*\.css$/, '', 'other-assets')
+    const base = viteConfig ? viteConfig?.testConfig?.baseRoute : ''
+    css = findAssetFile(/index.*\.css$/, base, 'other-assets')
   })
 
   test('relative asset URL', () => {
diff --git a/playground/assets/vite.config-relative-base.js b/playground/assets/vite.config-relative-base.js
index ba624964d3e0e3..12c3132f79a9b0 100644
--- a/playground/assets/vite.config-relative-base.js
+++ b/playground/assets/vite.config-relative-base.js
@@ -8,7 +8,7 @@ module.exports = {
   base: './', // relative base to make dist portable
   build: {
     ...baseConfig.build,
-    outDir: 'dist',
+    outDir: 'dist/relative-base',
     watch: false,
     minify: false,
     assetsInlineLimit: 0,
@@ -19,5 +19,9 @@ module.exports = {
         assetFileNames: 'other-assets/[name].[hash][extname]'
       }
     }
-  }
+  },
+  testConfig: {
+    baseRoute: '/relative-base/'
+  },
+  cacheDir: 'node_modules/.vite/relative-base'
 }
diff --git a/playground/assets/vite.config.js b/playground/assets/vite.config.js
index c9d821ae3d73ee..23bd11908130cd 100644
--- a/playground/assets/vite.config.js
+++ b/playground/assets/vite.config.js
@@ -17,5 +17,6 @@ module.exports = {
     assetsInlineLimit: 8192, // 8kb
     manifest: true,
     watch: {}
-  }
+  },
+  cacheDir: 'node_modules/.vite/foo'
 }
diff --git a/playground/test-utils.ts b/playground/test-utils.ts
index 2e0eafeda4191e..28534a78655127 100644
--- a/playground/test-utils.ts
+++ b/playground/test-utils.ts
@@ -150,7 +150,7 @@ export async function untilUpdated(
   runInBuild = false
 ): Promise<void> {
   if (isBuild && !runInBuild) return
-  const maxTries = process.env.CI ? 100 : 50
+  const maxTries = process.env.CI ? 200 : 50
   for (let tries = 0; tries < maxTries; tries++) {
     const actual = (await poll()) ?? ''
     if (actual.indexOf(expected) > -1 || tries === maxTries - 1) {
@@ -162,12 +162,12 @@ export async function untilUpdated(
   }
 }
 
-export const extractSourcemap = (content: string) => {
+export const extractSourcemap = (content: string): any => {
   const lines = content.trim().split('\n')
   return fromComment(lines[lines.length - 1]).toObject()
 }
 
-export const formatSourcemapForSnapshot = (map: any) => {
+export const formatSourcemapForSnapshot = (map: any): any => {
   const root = normalizePath(testDir)
   const m = { ...map }
   delete m.file
diff --git a/playground/vitestGlobalSetup.ts b/playground/vitestGlobalSetup.ts
index 52b49d01f38fda..ec598ce6b8d6a3 100644
--- a/playground/vitestGlobalSetup.ts
+++ b/playground/vitestGlobalSetup.ts
@@ -8,7 +8,7 @@ const DIR = path.join(os.tmpdir(), 'vitest_playwright_global_setup')
 
 let browserServer: BrowserServer | undefined
 
-export async function setup() {
+export async function setup(): Promise<void> {
   browserServer = await chromium.launchServer({
     headless: !process.env.VITE_DEBUG_SERVE,
     args: process.env.CI
@@ -41,7 +41,7 @@ export async function setup() {
     })
 }
 
-export async function teardown() {
+export async function teardown(): Promise<void> {
   browserServer?.close()
   if (!process.env.VITE_PRESERVE_BUILD_ARTIFACTS) {
     fs.removeSync(path.resolve(__dirname, '../playground-temp'))
diff --git a/playground/vitestSetup.ts b/playground/vitestSetup.ts
index 13e7592ad380f2..39533fc8b099b7 100644
--- a/playground/vitestSetup.ts
+++ b/playground/vitestSetup.ts
@@ -1,7 +1,6 @@
 import * as http from 'http'
-import { dirname, resolve } from 'path'
+import path, { dirname, resolve } from 'path'
 import os from 'os'
-import path from 'path'
 import sirv from 'sirv'
 import fs from 'fs-extra'
 import { chromium } from 'playwright-chromium'
@@ -25,7 +24,10 @@ export const workspaceRoot = path.resolve(__dirname, '../')
 export const isBuild = !!process.env.VITE_TEST_BUILD
 export const isServe = !isBuild
 export const isWindows = process.platform === 'win32'
-export const viteBinPath = path.join(workspaceRoot, 'packages/vite/bin/vite.js')
+export const viteBinPath = path.posix.join(
+  workspaceRoot,
+  'packages/vite/bin/vite.js'
+)
 
 // #endregion
 
@@ -49,6 +51,11 @@ export let testDir: string
  * Test folder name
  */
 export let testName: string
+/**
+ * current test using vite inline config
+ * when using server.js is not possible to get the config
+ */
+export let viteConfig: InlineConfig | undefined
 
 export const serverLogs: string[] = []
 export const browserLogs: string[] = []
@@ -61,7 +68,17 @@ export let browser: Browser = undefined!
 export let viteTestUrl: string = ''
 export let watcher: RollupWatcher | undefined = undefined
 
-export function setViteUrl(url: string) {
+declare module 'vite' {
+  interface InlineConfig {
+    testConfig?: {
+      // relative base output use relative path
+      // rewrite the url to truth file path
+      baseRoute: string
+    }
+  }
+}
+
+export function setViteUrl(url: string): void {
   viteTestUrl = url
 }
 
@@ -156,7 +173,7 @@ beforeAll(async (s) => {
   }
 })
 
-export async function startDefaultServe() {
+export async function startDefaultServe(): Promise<void> {
   const testCustomConfig = resolve(dirname(testPath), 'vite.config.js')
   let config: InlineConfig | undefined
   if (fs.existsSync(testCustomConfig)) {
@@ -193,9 +210,9 @@ export async function startDefaultServe() {
 
   if (!isBuild) {
     process.env.VITE_INLINE = 'inline-serve'
-    server = await (
-      await createServer(mergeConfig(options, config || {}))
-    ).listen()
+    const testConfig = mergeConfig(options, config || {})
+    viteConfig = testConfig
+    server = await (await createServer(testConfig)).listen()
     // use resolved port/base from server
     const base = server.config.base === '/' ? '' : server.config.base
     viteTestUrl = `http://localhost:${server.config.server.port}${base}`
@@ -210,7 +227,9 @@ export async function startDefaultServe() {
       }
     })
     options.plugins = [resolvedPlugin()]
-    const rollupOutput = await build(mergeConfig(options, config || {}))
+    const testConfig = mergeConfig(options, config || {})
+    viteConfig = testConfig
+    const rollupOutput = await build(testConfig)
     const isWatch = !!resolvedConfig!.build.watch
     // in build watch,call startStaticServer after the build is complete
     if (isWatch) {
@@ -245,11 +264,15 @@ function startStaticServer(config?: InlineConfig): Promise<string> {
 
   // start static file server
   const serve = sirv(resolve(rootDir, 'dist'), { dev: !!config?.build?.watch })
+  const baseDir = config?.testConfig?.baseRoute
   const httpServer = (server = http.createServer((req, res) => {
     if (req.url === '/ping') {
       res.statusCode = 200
       res.end('pong')
     } else {
+      if (baseDir) {
+        req.url = path.posix.join(baseDir, req.url)
+      }
       serve(req, res)
     }
   }))
diff --git a/playground/worker/__tests__/es/es-worker.spec.ts b/playground/worker/__tests__/es/es-worker.spec.ts
index 9959cc29aef0bd..1520670e2b602f 100644
--- a/playground/worker/__tests__/es/es-worker.spec.ts
+++ b/playground/worker/__tests__/es/es-worker.spec.ts
@@ -1,63 +1,48 @@
 import fs from 'fs'
 import path from 'path'
-import type { Page } from 'playwright-chromium'
 import { isBuild, page, testDir, untilUpdated } from '~utils'
 
 test('normal', async () => {
-  await page.click('.ping')
-  await untilUpdated(() => page.textContent('.pong'), 'pong')
+  await untilUpdated(() => page.textContent('.pong'), 'pong', true)
   await untilUpdated(
     () => page.textContent('.mode'),
-    process.env.NODE_ENV // match workerImport.js
+    process.env.NODE_ENV,
+    true
   )
   await untilUpdated(
     () => page.textContent('.bundle-with-plugin'),
-    'worker bundle with plugin success!'
+    'worker bundle with plugin success!',
+    true
   )
 })
 
 test('TS output', async () => {
-  await page.click('.ping-ts-output')
-  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong')
+  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong', true)
 })
 
 test('inlined', async () => {
-  await page.click('.ping-inline')
-  await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
+  await untilUpdated(() => page.textContent('.pong-inline'), 'pong', true)
 })
 
-const waitSharedWorkerTick = (
-  (resolvedSharedWorkerCount: number) => async (page: Page) => {
-    await untilUpdated(async () => {
-      const count = await page.textContent('.tick-count')
-      // ignore the initial 0
-      return count === '1' ? 'page loaded' : ''
-    }, 'page loaded')
-    // test.concurrent sequential is not guaranteed
-    // force page to wait to ensure two pages overlap in time
-    resolvedSharedWorkerCount++
-    if (resolvedSharedWorkerCount < 2) return
-
-    await untilUpdated(() => {
-      return resolvedSharedWorkerCount === 2 ? 'all pages loaded' : ''
-    }, 'all pages loaded')
-  }
-)(0)
-
-test.each([[true], [false]])('shared worker', async (doTick) => {
-  if (doTick) {
-    await page.click('.tick-shared')
-  }
-  await waitSharedWorkerTick(page)
+test('shared worker', async () => {
+  await untilUpdated(() => page.textContent('.tick-count'), 'pong', true)
 })
 
 test('worker emitted and import.meta.url in nested worker (serve)', async () => {
-  expect(await page.textContent('.nested-worker')).toMatch(
-    'worker-nested-worker'
+  await untilUpdated(
+    () => page.textContent('.nested-worker'),
+    'worker-nested-worker',
+    true
   )
-  expect(await page.textContent('.nested-worker-module')).toMatch('sub-worker')
-  expect(await page.textContent('.nested-worker-constructor')).toMatch(
-    '"type":"constructor"'
+  await untilUpdated(
+    () => page.textContent('.nested-worker-module'),
+    'sub-worker',
+    true
+  )
+  await untilUpdated(
+    () => page.textContent('.nested-worker-constructor'),
+    '"type":"constructor"',
+    true
   )
 })
 
@@ -87,45 +72,73 @@ describe.runIf(isBuild)('build', () => {
   })
 
   test('worker emitted and import.meta.url in nested worker (build)', async () => {
-    expect(await page.textContent('.nested-worker-module')).toMatch(
-      '"type":"module"'
+    await untilUpdated(
+      () => page.textContent('.nested-worker-module'),
+      '"type":"module"',
+      true
     )
-    expect(await page.textContent('.nested-worker-constructor')).toMatch(
-      '"type":"constructor"'
+    await untilUpdated(
+      () => page.textContent('.nested-worker-constructor'),
+      '"type":"constructor"',
+      true
     )
   })
 })
 
 test('module worker', async () => {
-  expect(await page.textContent('.shared-worker-import-meta-url')).toMatch(
-    'A string'
+  await untilUpdated(
+    () => page.textContent('.shared-worker-import-meta-url'),
+    'A string',
+    true
   )
 })
 
 test('classic worker', async () => {
-  expect(await page.textContent('.classic-worker')).toMatch('A classic')
-  expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
+  await untilUpdated(
+    () => page.textContent('.classic-worker'),
+    'A classic',
+    true
+  )
+  await untilUpdated(
+    () => page.textContent('.classic-shared-worker'),
+    'A classic',
+    true
+  )
 })
 
 test('emit chunk', async () => {
-  expect(await page.textContent('.emit-chunk-worker')).toMatch(
-    '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]'
+  await untilUpdated(
+    () => page.textContent('.emit-chunk-worker'),
+    '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]',
+    true
   )
-  expect(await page.textContent('.emit-chunk-dynamic-import-worker')).toMatch(
-    '"A string/es/"'
+  await untilUpdated(
+    () => page.textContent('.emit-chunk-dynamic-import-worker'),
+    '"A string/es/"',
+    true
   )
 })
 
 test('url query worker', async () => {
-  expect(await page.textContent('.simple-worker-url')).toMatch(
-    'Hello from simple worker!'
+  await untilUpdated(
+    () => page.textContent('.simple-worker-url'),
+    'Hello from simple worker!',
+    true
   )
 })
 
 test('import.meta.glob in worker', async () => {
-  expect(await page.textContent('.importMetaGlob-worker')).toMatch('["')
+  await untilUpdated(
+    () => page.textContent('.importMetaGlob-worker'),
+    '["',
+    true
+  )
 })
 
 test('import.meta.glob with eager in worker', async () => {
-  expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
+  await untilUpdated(
+    () => page.textContent('.importMetaGlobEager-worker'),
+    '["',
+    true
+  )
 })
diff --git a/playground/worker/__tests__/iife/worker.spec.ts b/playground/worker/__tests__/iife/iife-worker.spec.ts
similarity index 54%
rename from playground/worker/__tests__/iife/worker.spec.ts
rename to playground/worker/__tests__/iife/iife-worker.spec.ts
index d7b437c8a3272d..8483a206036bf0 100644
--- a/playground/worker/__tests__/iife/worker.spec.ts
+++ b/playground/worker/__tests__/iife/iife-worker.spec.ts
@@ -1,16 +1,11 @@
 import fs from 'fs'
 import path from 'path'
-import type { Page } from 'playwright-chromium'
 import { test } from 'vitest'
 import { isBuild, page, testDir, untilUpdated } from '~utils'
 
 test('normal', async () => {
-  await page.click('.ping')
   await untilUpdated(() => page.textContent('.pong'), 'pong')
-  await untilUpdated(
-    () => page.textContent('.mode'),
-    process.env.NODE_ENV // match workerImport.js
-  )
+  await untilUpdated(() => page.textContent('.mode'), process.env.NODE_ENV)
   await untilUpdated(
     () => page.textContent('.bundle-with-plugin'),
     'worker bundle with plugin success!'
@@ -18,44 +13,25 @@ test('normal', async () => {
 })
 
 test('TS output', async () => {
-  await page.click('.ping-ts-output')
   await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong')
 })
 
 test('inlined', async () => {
-  await page.click('.ping-inline')
   await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
 })
 
-const waitSharedWorkerTick = (
-  (resolvedSharedWorkerCount: number) => async (page: Page) => {
-    await untilUpdated(async () => {
-      const count = await page.textContent('.tick-count')
-      // ignore the initial 0
-      return count === '1' ? 'page loaded' : ''
-    }, 'page loaded')
-    // test.concurrent sequential is not guaranteed
-    // force page to wait to ensure two pages overlap in time
-    resolvedSharedWorkerCount++
-    if (resolvedSharedWorkerCount < 2) return
-
-    await untilUpdated(() => {
-      return resolvedSharedWorkerCount === 2 ? 'all pages loaded' : ''
-    }, 'all pages loaded')
-  }
-)(0)
-
-test.each([[true], [false]])('shared worker', async (doTick) => {
-  if (doTick) {
-    await page.click('.tick-shared')
-  }
-  await waitSharedWorkerTick(page)
+test('shared worker', async () => {
+  await untilUpdated(() => page.textContent('.tick-count'), 'pong')
 })
 
 test('worker emitted and import.meta.url in nested worker (serve)', async () => {
-  expect(await page.textContent('.nested-worker')).toMatch('/worker-nested')
-  expect(await page.textContent('.nested-worker-module')).toMatch('/sub-worker')
-  expect(await page.textContent('.nested-worker-constructor')).toMatch(
+  await untilUpdated(() => page.textContent('.nested-worker'), '/worker-nested')
+  await untilUpdated(
+    () => page.textContent('.nested-worker-module'),
+    '/sub-worker'
+  )
+  await untilUpdated(
+    () => page.textContent('.nested-worker-constructor'),
     '"type":"constructor"'
   )
 })
@@ -86,32 +62,42 @@ describe.runIf(isBuild)('build', () => {
   })
 
   test('worker emitted and import.meta.url in nested worker (build)', async () => {
-    expect(await page.textContent('.nested-worker-module')).toMatch(
+    await untilUpdated(
+      () => page.textContent('.nested-worker-module'),
       '"type":"module"'
     )
-    expect(await page.textContent('.nested-worker-constructor')).toMatch(
+    await untilUpdated(
+      () => page.textContent('.nested-worker-constructor'),
       '"type":"constructor"'
     )
   })
 })
 
 test('module worker', async () => {
-  expect(await page.textContent('.shared-worker-import-meta-url')).toMatch(
+  await untilUpdated(
+    () => page.textContent('.shared-worker-import-meta-url'),
     'A string'
   )
 })
 
 test('classic worker', async () => {
-  expect(await page.textContent('.classic-worker')).toMatch('A classic')
-  expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
+  await untilUpdated(() => page.textContent('.classic-worker'), 'A classic')
+  await untilUpdated(
+    () => page.textContent('.classic-shared-worker'),
+    'A classic'
+  )
 })
 
 test('url query worker', async () => {
-  expect(await page.textContent('.simple-worker-url')).toMatch(
+  await untilUpdated(
+    () => page.textContent('.simple-worker-url'),
     'Hello from simple worker!'
   )
 })
 
 test('import.meta.glob eager in worker', async () => {
-  expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
+  await untilUpdated(
+    () => page.textContent('.importMetaGlobEager-worker'),
+    '["'
+  )
 })
diff --git a/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
index 2b146075f38146..b93513264b126e 100644
--- a/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
+++ b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
@@ -1,74 +1,62 @@
 import fs from 'fs'
 import path from 'path'
-import type { Page } from 'playwright-chromium'
 import { isBuild, page, testDir, untilUpdated } from '~utils'
 
 test('normal', async () => {
-  await page.click('.ping')
-  await untilUpdated(() => page.textContent('.pong'), 'pong')
+  await untilUpdated(() => page.textContent('.pong'), 'pong', true)
   await untilUpdated(
     () => page.textContent('.mode'),
-    process.env.NODE_ENV // match workerImport.js
+    process.env.NODE_ENV,
+    true
   )
   await untilUpdated(
     () => page.textContent('.bundle-with-plugin'),
-    'worker bundle with plugin success!'
+    'worker bundle with plugin success!',
+    true
   )
 })
 
 test('TS output', async () => {
-  await page.click('.ping-ts-output')
-  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong')
+  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong', true)
 })
 
 test('inlined', async () => {
-  await page.click('.ping-inline')
-  await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
+  await untilUpdated(() => page.textContent('.pong-inline'), 'pong', true)
 })
 
-const waitSharedWorkerTick = (
-  (resolvedSharedWorkerCount: number) => async (page: Page) => {
-    await untilUpdated(async () => {
-      const count = await page.textContent('.tick-count')
-      // ignore the initial 0
-      return count === '1' ? 'page loaded' : ''
-    }, 'page loaded')
-    // test.concurrent sequential is not guaranteed
-    // force page to wait to ensure two pages overlap in time
-    resolvedSharedWorkerCount++
-    if (resolvedSharedWorkerCount < 2) return
-
-    await untilUpdated(() => {
-      return resolvedSharedWorkerCount === 2 ? 'all pages loaded' : ''
-    }, 'all pages loaded')
-  }
-)(0)
-
-test.each([[true], [false]])('shared worker', async (doTick) => {
-  if (doTick) {
-    await page.click('.tick-shared')
-  }
-  await waitSharedWorkerTick(page)
+test('shared worker', async () => {
+  await untilUpdated(() => page.textContent('.tick-count'), 'pong', true)
 })
 
 test('worker emitted and import.meta.url in nested worker (serve)', async () => {
-  expect(await page.textContent('.nested-worker')).toMatch(
-    'worker-nested-worker'
+  await untilUpdated(
+    () => page.textContent('.nested-worker'),
+    'worker-nested-worker',
+    true
   )
-  expect(await page.textContent('.nested-worker-module')).toMatch('sub-worker')
-  expect(await page.textContent('.nested-worker-constructor')).toMatch(
-    '"type":"constructor"'
+  await untilUpdated(
+    () => page.textContent('.nested-worker-module'),
+    'sub-worker',
+    true
+  )
+  await untilUpdated(
+    () => page.textContent('.nested-worker-constructor'),
+    '"type":"constructor"',
+    true
   )
 })
 
 describe.runIf(isBuild)('build', () => {
   // assert correct files
-  test('inlined code generation', async () => {
-    const chunksDir = path.resolve(testDir, 'dist/chunks')
+  test('inlined code generation', () => {
+    const chunksDir = path.resolve(testDir, 'dist/relative-base/chunks')
     const files = fs.readdirSync(chunksDir)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(chunksDir, index), 'utf-8')
-    const workerEntriesDir = path.resolve(testDir, 'dist/worker-entries')
+    const workerEntriesDir = path.resolve(
+      testDir,
+      'dist/relative-base/worker-entries'
+    )
     const workerFiles = fs.readdirSync(workerEntriesDir)
     const worker = workerFiles.find((f) => f.includes('worker_entry.my-worker'))
     const workerContent = fs.readFileSync(
@@ -88,39 +76,65 @@ describe.runIf(isBuild)('build', () => {
   })
 
   test('worker emitted and import.meta.url in nested worker (build)', async () => {
-    expect(await page.textContent('.nested-worker-module')).toMatch(
-      '"type":"module"'
+    await untilUpdated(
+      () => page.textContent('.nested-worker-module'),
+      '"type":"module"',
+      true
     )
-    expect(await page.textContent('.nested-worker-constructor')).toMatch(
-      '"type":"constructor"'
+    await untilUpdated(
+      () => page.textContent('.nested-worker-constructor'),
+      '"type":"constructor"',
+      true
     )
   })
 })
 
 test('module worker', async () => {
-  expect(await page.textContent('.shared-worker-import-meta-url')).toMatch(
-    'A string'
+  await untilUpdated(
+    () => page.textContent('.shared-worker-import-meta-url'),
+    'A string',
+    true
   )
 })
 
 test.runIf(isBuild)('classic worker', async () => {
-  expect(await page.textContent('.classic-worker')).toMatch('A classic')
-  expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
+  await untilUpdated(
+    () => page.textContent('.classic-worker'),
+    'A classic',
+    true
+  )
+  await untilUpdated(
+    () => page.textContent('.classic-shared-worker'),
+    'A classic',
+    true
+  )
 })
 
 test.runIf(isBuild)('emit chunk', async () => {
-  expect(await page.textContent('.emit-chunk-worker')).toMatch(
-    '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]'
+  await untilUpdated(
+    () => page.textContent('.emit-chunk-worker'),
+    '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]',
+    true
   )
-  expect(await page.textContent('.emit-chunk-dynamic-import-worker')).toMatch(
-    '"A string./"'
+  await untilUpdated(
+    () => page.textContent('.emit-chunk-dynamic-import-worker'),
+    '"A string./"',
+    true
   )
 })
 
 test('import.meta.glob in worker', async () => {
-  expect(await page.textContent('.importMetaGlob-worker')).toMatch('["')
+  await untilUpdated(
+    () => page.textContent('.importMetaGlob-worker'),
+    '["',
+    true
+  )
 })
 
 test('import.meta.glob with eager in worker', async () => {
-  expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
+  await untilUpdated(
+    () => page.textContent('.importMetaGlobEager-worker'),
+    '["',
+    true
+  )
 })
diff --git a/playground/worker/__tests__/sourcemap/__snapshots__/sourcemap-worker.spec.ts.snap b/playground/worker/__tests__/sourcemap/__snapshots__/sourcemap-worker.spec.ts.snap
index 71ea7527a69d51..3895aae40ad402 100644
--- a/playground/worker/__tests__/sourcemap/__snapshots__/sourcemap-worker.spec.ts.snap
+++ b/playground/worker/__tests__/sourcemap/__snapshots__/sourcemap-worker.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`serve:worker-sourcemap > nested worker 1`] = `
 {
-  "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uCAAsB,CAAC;AAClD;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC,CAAC;AACH,CAAC;AACD;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;",
+  "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uCAAsB,CAAC;AAClD;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjC,CAAC;AACD;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/B;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;",
   "sources": [
     "/root/possible-ts-output-worker.mjs?worker_file",
   ],
diff --git a/playground/worker/index.html b/playground/worker/index.html
index 1fd387d5a9c08b..d444f2ab878b98 100644
--- a/playground/worker/index.html
+++ b/playground/worker/index.html
@@ -1,30 +1,40 @@
+<h2 class="format-iife">format iife:</h2>
+<div>Expected values: <span class="mode-true"></span></div>
+
 <p>worker template error match:</p>
 <code>
   const worker = new Worker(new URL('./worker.js', import.meta.url))
 </code>
 
-<h2 class="format-iife">format iife:</h2>
-<div>Expected values: <span class="mode-true"></span></div>
-<button class="ping">Ping</button>
+<p>
+  import myWorker from '../my-worker?worker'
+  <span class="classname">.pong</span>
+  <span class="classname">.mode</span>
+  <span class="classname">.bundle-with-plugin</span>
+</p>
 <div>
-  Response from worker: <span class="pong"></span><span class="mode"></span>
+  <div>Response from worker: <span class="pong"></span></div>
+  <div>mode: <span class="mode"></span></div>
+  <div>bundle-with-plugin: <span class="bundle-with-plugin"></span></div>
 </div>
-<div>bundle-with-plugin: <span class="bundle-with-plugin"></span></div>
 
-<button class="ping-inline">Ping Inline Worker</button>
-<div>Response from inline worker: <span class="pong-inline"></span></div>
+<p>
+  import InlineWorker from '../my-worker?worker&inline'
+  <span class="classname">.pong-inline</span>
+</p>
+<code class="pong-inline"></code>
 
-<button class="ping-ts-output">Ping Possible Compiled TS Worker</button>
-<div>
-  Response from worker imported from code that might be compiled TS:
-  <span class="pong-ts-output"></span>
-</div>
+<p>
+  import TSOutputWorker from '../possible-ts-output-worker?worker'
+  <span class="classname">.pong-ts-output</span>
+</p>
+<code class="pong-ts-output"></code>
 
-<button class="tick-shared">Tick Shared Worker</button>
-<div>
-  Tick from shared worker, it syncs between pages:
-  <span class="tick-count">0</span>
-</div>
+<p>
+  import mySharedWorker from '../my-shared-worker?sharedworker&name=shared'
+  <span class="classname">.tick-count</span>
+</p>
+<code class="tick-count"></code>
 
 <p>
   new Worker(new URL('./url-worker.js', import.meta.url), { type: 'module' })
diff --git a/playground/worker/my-shared-worker.ts b/playground/worker/my-shared-worker.ts
index 8d2099a7636459..2c77f0fd56c701 100644
--- a/playground/worker/my-shared-worker.ts
+++ b/playground/worker/my-shared-worker.ts
@@ -1,22 +1,16 @@
-let count = 0
 const ports = new Set()
 
 // @ts-expect-error
-onconnect = (event) => {
+self.onconnect = (event) => {
   const port = event.ports[0]
   ports.add(port)
-  port.postMessage(count)
-  port.onmessage = (message) => {
-    if (message.data === 'tick') {
-      count++
-      ports.forEach((p: any) => {
-        p.postMessage(count)
-      })
-    }
+  port.postMessage('pong')
+  port.onmessage = () => {
+    ports.forEach((p: any) => {
+      p.postMessage('pong')
+    })
   }
 }
 
 // for sourcemap
 console.log('my-shared-worker.js')
-
-export {}
diff --git a/playground/worker/my-worker.ts b/playground/worker/my-worker.ts
index 7207a0ea5a077e..8c91d49d70ba5c 100644
--- a/playground/worker/my-worker.ts
+++ b/playground/worker/my-worker.ts
@@ -1,12 +1,13 @@
 import { mode, msg } from './modules/workerImport'
 import { bundleWithPlugin } from './modules/test-plugin'
-// import { msg as msgFromDep } from 'dep-to-optimize'
+import { msg as msgFromDep } from 'dep-to-optimize'
 
 self.onmessage = (e) => {
   if (e.data === 'ping') {
-    self.postMessage({ msg, mode, bundleWithPlugin }) // TODO: fix darwin, and add back: msgFromDep })
+    self.postMessage({ msg, mode, bundleWithPlugin })
   }
 }
+self.postMessage({ msg, mode, bundleWithPlugin, msgFromDep })
 
 // for sourcemap
 console.log('my-worker.js')
diff --git a/playground/worker/possible-ts-output-worker.mjs b/playground/worker/possible-ts-output-worker.mjs
index db76614bc78267..e51c26e76c09b2 100644
--- a/playground/worker/possible-ts-output-worker.mjs
+++ b/playground/worker/possible-ts-output-worker.mjs
@@ -1,10 +1,10 @@
-import { msg, mode } from './modules/workerImport'
+import { mode, msg } from './modules/workerImport'
 
 self.onmessage = (e) => {
-  if (e.data === 'ping') {
-    self.postMessage({ msg, mode })
-  }
+  self.postMessage({ msg, mode })
 }
 
+self.postMessage({ msg, mode })
+
 // for sourcemap
 console.log('possible-ts-output-worker.mjs')
diff --git a/playground/worker/vite.config-es.js b/playground/worker/vite.config-es.js
index 6d6704de0bc213..0d28d241ca8d42 100644
--- a/playground/worker/vite.config-es.js
+++ b/playground/worker/vite.config-es.js
@@ -38,5 +38,6 @@ module.exports = vite.defineConfig({
         }
       }
     }
-  ]
+  ],
+  cacheDir: 'node_modules/.vite/es'
 })
diff --git a/playground/worker/vite.config-relative-base.js b/playground/worker/vite.config-relative-base.js
index dd10caa205f60b..64c2b7983fb527 100644
--- a/playground/worker/vite.config-relative-base.js
+++ b/playground/worker/vite.config-relative-base.js
@@ -1,10 +1,9 @@
+const path = require('path')
 const vueJsx = require('@vitejs/plugin-vue-jsx')
 const vite = require('vite')
-const path = require('path')
 
 module.exports = vite.defineConfig({
   base: './',
-  enforce: 'pre',
   worker: {
     format: 'es',
     plugins: [vueJsx()],
@@ -17,7 +16,7 @@ module.exports = vite.defineConfig({
     }
   },
   build: {
-    outDir: 'dist',
+    outDir: 'dist/relative-base',
     rollupOptions: {
       output: {
         assetFileNames: 'other-assets/[name]-[hash].[ext]',
@@ -26,6 +25,9 @@ module.exports = vite.defineConfig({
       }
     }
   },
+  testConfig: {
+    baseRoute: '/relative-base/'
+  },
   plugins: [
     {
       name: 'resolve-format-es',
@@ -38,5 +40,6 @@ module.exports = vite.defineConfig({
         }
       }
     }
-  ]
+  ],
+  cacheDir: 'node_modules/.vite/relative-base'
 })
diff --git a/playground/worker/vite.config-sourcemap.js b/playground/worker/vite.config-sourcemap.js
index ea1c66a33a44d7..a84d8e6699af14 100644
--- a/playground/worker/vite.config-sourcemap.js
+++ b/playground/worker/vite.config-sourcemap.js
@@ -12,13 +12,30 @@ module.exports = vite.defineConfig((sourcemap) => {
     }/`,
     worker: {
       format: 'iife',
-      plugins: [vueJsx()]
+      plugins: [vueJsx()],
+      rollupOptions: {
+        output: {
+          assetFileNames: 'assets/[name].worker_asset[hash].[ext]',
+          chunkFileNames: 'assets/[name].worker_chunk[hash].js',
+          entryFileNames: 'assets/[name].worker_entry[hash].js'
+        }
+      }
     },
+    cacheDir: `node_modules/.vite/iife-${
+      typeof sourcemap === 'boolean' ? 'sourcemap' : 'sourcemap-' + sourcemap
+    }`,
     build: {
       outDir: `dist/iife-${
         typeof sourcemap === 'boolean' ? 'sourcemap' : 'sourcemap-' + sourcemap
       }/`,
-      sourcemap: sourcemap
+      sourcemap: sourcemap,
+      rollupOptions: {
+        output: {
+          assetFileNames: 'assets/[name].[hash].[ext]',
+          chunkFileNames: 'assets/[name].[hash].js',
+          entryFileNames: 'assets/[name].[hash].js'
+        }
+      }
     }
   }
 })
diff --git a/playground/worker/vite.config.js b/playground/worker/vite.config.js
index b7760bc4d7a240..f937372c6e0012 100644
--- a/playground/worker/vite.config.js
+++ b/playground/worker/vite.config.js
@@ -5,9 +5,24 @@ module.exports = vite.defineConfig({
   base: '/iife/',
   worker: {
     format: 'iife',
-    plugins: [vueJsx()]
+    plugins: [vueJsx()],
+    rollupOptions: {
+      output: {
+        assetFileNames: 'assets/worker_asset.[name].[ext]',
+        chunkFileNames: 'assets/worker_chunk.[name].js',
+        entryFileNames: 'assets/worker_entry.[name].js'
+      }
+    }
   },
   build: {
-    outDir: 'dist/iife'
-  }
+    outDir: 'dist/iife',
+    rollupOptions: {
+      output: {
+        assetFileNames: 'assets/[name].[ext]',
+        chunkFileNames: 'assets/[name].js',
+        entryFileNames: 'assets/[name].js'
+      }
+    }
+  },
+  cacheDir: 'node_modules/.vite/iife'
 })
diff --git a/playground/worker/worker/main-module.js b/playground/worker/worker/main-module.js
index 81e639341d9d5b..4f6fa8dd7b6334 100644
--- a/playground/worker/worker/main-module.js
+++ b/playground/worker/worker/main-module.js
@@ -12,46 +12,31 @@ function text(el, text) {
 document.querySelector('.mode-true').textContent = mode
 
 const worker = new myWorker()
+worker.postMessage('ping')
 worker.addEventListener('message', (e) => {
   text('.pong', e.data.msg)
   text('.mode', e.data.mode)
   text('.bundle-with-plugin', e.data.bundleWithPlugin)
 })
 
-document.querySelector('.ping').addEventListener('click', () => {
-  worker.postMessage('ping')
-})
-
 const inlineWorker = new InlineWorker()
+inlineWorker.postMessage('ping')
 inlineWorker.addEventListener('message', (e) => {
   text('.pong-inline', e.data.msg)
 })
 
-document.querySelector('.ping-inline').addEventListener('click', () => {
-  console.log('111')
-  inlineWorker.postMessage('ping')
-})
-
 const sharedWorker = new mySharedWorker()
-document.querySelector('.tick-shared').addEventListener('click', () => {
-  sharedWorker.port.postMessage('tick')
-})
-
 sharedWorker.port.addEventListener('message', (event) => {
   text('.tick-count', event.data)
 })
-
 sharedWorker.port.start()
 
 const tsOutputWorker = new TSOutputWorker()
+tsOutputWorker.postMessage('ping')
 tsOutputWorker.addEventListener('message', (e) => {
   text('.pong-ts-output', e.data.msg)
 })
 
-document.querySelector('.ping-ts-output').addEventListener('click', () => {
-  tsOutputWorker.postMessage('ping')
-})
-
 const nestedWorker = new NestedWorker()
 nestedWorker.addEventListener('message', (ev) => {
   if (typeof ev.data === 'string') {