diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index 191da897858dd5..f65e3009a7aa71 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -232,6 +232,12 @@ test('new URL(`${dynamic}`, import.meta.url)', async () => {
   )
 })
 
+test('new URL(`non-existent`, import.meta.url)', async () => {
+  expect(await page.textContent('.non-existent-import-meta-url')).toMatch(
+    '/foo/non-existent'
+  )
+})
+
 if (isBuild) {
   test('manifest', async () => {
     const manifest = readManifest('foo')
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index e33e9a7cdaaf7d..25c889a445b771 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -166,6 +166,11 @@ <h2>new URL(`./${dynamic}`, import.meta.url,) (with comma)</h2>
   <code class="dynamic-import-meta-url-2-comma"></code>
 </p>
 
+<h2>new URL(`non-existent`, import.meta.url)</h2>
+<p>
+  <code class="non-existent-import-meta-url"></code>
+</p>
+
 <h2>simple script tag import-expression</h2>
 <code class="import-expression"></code>
 <script>
@@ -257,6 +262,9 @@ <h3 class="foo-public">
   document.querySelector('.import-meta-url-img-comma-nl').src =
     metaUrlWithCommaNL
 
+  const metaUrlNonExistent = new URL('non-existent', import.meta.url).pathname
+  text('.non-existent-import-meta-url', metaUrlNonExistent)
+
   /**
    * don't process the code in the comment
    * const url = new URL('non_existent_file.png', import.meta.url)
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index d3426094f32e53..4df0de80300e24 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -146,11 +146,11 @@ export function checkPublicFile(
   }
 }
 
-export function fileToUrl(
+export async function fileToUrl(
   id: string,
   config: ResolvedConfig,
   ctx: PluginContext
-): string | Promise<string> {
+): Promise<string> {
   if (config.command === 'serve') {
     return fileToDevUrl(id, config)
   } else {
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index 56cfe0d8d29499..46e37a7988a00c 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -59,7 +59,14 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
 
           const url = rawUrl.slice(1, -1)
           const file = path.resolve(path.dirname(id), url)
-          const builtUrl = await fileToUrl(file, config, this)
+          // Get final asset URL. Catch error if the file does not exist,
+          // in which we can resort to the initial URL and let it resolve in runtime
+          const builtUrl = await fileToUrl(file, config, this).catch(() => {
+            config.logger.warnOnce(
+              `${exp} doesn't exist at build time, it will remain unchanged to be resolved at runtime`
+            )
+            return url
+          })
           s.overwrite(
             index,
             index + exp.length,