diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index a6888e97ffe5a7..b093ecfb5e213a 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -1070,7 +1070,7 @@ function injectSsrFlag<T extends Record<string, any>>(
 
 /*
   The following functions are copied from rollup
-  https://github.com/rollup/rollup/blob/0bcf0a672ac087ff2eb88fbba45ec62389a4f45f/src/ast/nodes/MetaProperty.ts#L145-L193
+  https://github.com/rollup/rollup/blob/ce6cb93098850a46fa242e37b74a919e99a5de28/src/ast/nodes/MetaProperty.ts#L155-L203
 
   https://github.com/rollup/rollup
   The MIT License (MIT)
@@ -1101,7 +1101,7 @@ const getFileUrlFromFullPath = (path: string) =>
   `require('u' + 'rl').pathToFileURL(${path}).href`
 
 const getFileUrlFromRelativePath = (path: string) =>
-  getFileUrlFromFullPath(`__dirname + '/${path}'`)
+  getFileUrlFromFullPath(`__dirname + '/${escapeId(path)}'`)
 
 const relativeUrlMechanisms: Record<
   InternalModuleFormat,
@@ -1109,16 +1109,20 @@ const relativeUrlMechanisms: Record<
 > = {
   amd: (relativePath) => {
     if (relativePath[0] !== '.') relativePath = './' + relativePath
-    return getResolveUrl(`require.toUrl('${relativePath}'), document.baseURI`)
+    return getResolveUrl(
+      `require.toUrl('${escapeId(relativePath)}'), document.baseURI`,
+    )
   },
   cjs: (relativePath) =>
     `(typeof document === 'undefined' ? ${getFileUrlFromRelativePath(
       relativePath,
     )} : ${getRelativeUrlFromDocument(relativePath)})`,
-  es: (relativePath) => getResolveUrl(`'${relativePath}', import.meta.url`),
+  es: (relativePath) =>
+    getResolveUrl(`'${escapeId(relativePath)}', import.meta.url`),
   iife: (relativePath) => getRelativeUrlFromDocument(relativePath),
   // NOTE: make sure rollup generate `module` params
-  system: (relativePath) => getResolveUrl(`'${relativePath}', module.meta.url`),
+  system: (relativePath) =>
+    getResolveUrl(`'${escapeId(relativePath)}', module.meta.url`),
   umd: (relativePath) =>
     `(typeof document === 'undefined' && typeof location === 'undefined' ? ${getFileUrlFromRelativePath(
       relativePath,
@@ -1129,7 +1133,7 @@ const relativeUrlMechanisms: Record<
 const customRelativeUrlMechanisms = {
   ...relativeUrlMechanisms,
   'worker-iife': (relativePath) =>
-    getResolveUrl(`'${relativePath}', self.location.href`),
+    getResolveUrl(`'${escapeId(relativePath)}', self.location.href`),
 } as const satisfies Record<string, (relativePath: string) => string>
 
 export type RenderBuiltAssetUrl = (
diff --git a/playground/assets/index.html b/playground/assets/index.html
index dd013828cc96b0..7230c09c1d09ee 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -138,6 +138,11 @@ <h2>Unicode URL</h2>
   <img src="./nested/テスト-測試-white space.png" />
 </div>
 
+<h2>Filename including single quote</h2>
+<div>
+  <code class="filename-including-single-quote"></code>
+</div>
+
 <h2>encodeURI for the address</h2>
 <div>
   <img
@@ -440,6 +445,9 @@ <h3>assets in noscript</h3>
   import unicodeUrl from './テスト-測試-white space.js?url'
   text('.unicode-url', unicodeUrl)
 
+  import filenameIncludingSingleQuoteUrl from "./nested/with-single'quote.png"
+  text('.filename-including-single-quote', filenameIncludingSingleQuoteUrl)
+
   import cssUrl from './css/icons.css?url'
   text('.url-css', cssUrl)
 
diff --git a/playground/assets/nested/with-single'quote.png b/playground/assets/nested/with-single'quote.png
new file mode 100644
index 00000000000000..cb1c88d48c090a
Binary files /dev/null and b/playground/assets/nested/with-single'quote.png differ