diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index e50cd68ace76b0..4148138a6f4e63 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -174,7 +174,11 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
       }
 
       // relative
-      if (id.startsWith('.') || (preferRelative && /^\w/.test(id))) {
+      if (
+        id.startsWith('.') ||
+        (preferRelative && /^\w/.test(id)) ||
+        importer?.endsWith('.html')
+      ) {
         const basedir = importer ? path.dirname(importer) : process.cwd()
         const fsPath = path.resolve(basedir, id)
         // handle browser field mapping for relative imports
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index f31b52e6ac9ea2..b3da12a0003e57 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -347,3 +347,8 @@ test('html import word boundary', async () => {
   )
   expect(await page.textContent('.string-import-express')).toMatch('no load')
 })
+
+test('relative path in html asset', async () => {
+  expect(await page.textContent('.relative-js')).toMatch('hello')
+  expect(await getColor('.relative-css')).toMatch('red')
+})
diff --git a/playground/assets/asset/main.js b/playground/assets/asset/main.js
new file mode 100644
index 00000000000000..e889874ff000d2
--- /dev/null
+++ b/playground/assets/asset/main.js
@@ -0,0 +1,4 @@
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
+text('.relative-js', 'hello')
diff --git a/playground/assets/asset/style.css b/playground/assets/asset/style.css
new file mode 100644
index 00000000000000..bafc1d8f12badb
--- /dev/null
+++ b/playground/assets/asset/style.css
@@ -0,0 +1,3 @@
+.relative-css {
+  color: red;
+}
diff --git a/playground/assets/index.html b/playground/assets/index.html
index fcf0e4ce1e81d7..418cc06f05bcd1 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -290,7 +290,10 @@ <h3>style in svg</h3>
     />
   </g>
 </svg>
-
+<link rel="stylesheet" href="asset/style.css" />
+<div class="relative-css">link style</div>
+<div class="relative-js"></div>
+<script src="asset/main.js" type="module"></script>
 <style>
   @import '/foo.css';
 </style>
diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts
index 44372b324d5771..e57728cef08f2f 100644
--- a/playground/html/__tests__/html.spec.ts
+++ b/playground/html/__tests__/html.spec.ts
@@ -66,6 +66,13 @@ function testPage(isNested: boolean) {
     expect(await getColor('h1')).toBe(isNested ? 'red' : 'blue')
     expect(await getColor('p')).toBe('grey')
   })
+
+  if (isNested) {
+    test('relative path in html asset', async () => {
+      expect(await page.textContent('.relative-js')).toMatch('hello')
+      expect(await getColor('.relative-css')).toMatch('red')
+    })
+  }
 }
 
 describe('main', () => {
diff --git a/playground/html/nested/asset/main.js b/playground/html/nested/asset/main.js
new file mode 100644
index 00000000000000..e889874ff000d2
--- /dev/null
+++ b/playground/html/nested/asset/main.js
@@ -0,0 +1,4 @@
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
+text('.relative-js', 'hello')
diff --git a/playground/html/nested/asset/style.css b/playground/html/nested/asset/style.css
new file mode 100644
index 00000000000000..bafc1d8f12badb
--- /dev/null
+++ b/playground/html/nested/asset/style.css
@@ -0,0 +1,3 @@
+.relative-css {
+  color: red;
+}
diff --git a/playground/html/nested/index.html b/playground/html/nested/index.html
index 4fb855b783c890..2103a4b3bed77f 100644
--- a/playground/html/nested/index.html
+++ b/playground/html/nested/index.html
@@ -1,3 +1,9 @@
 <link rel="stylesheet" href="./nested.css" />
 <h1>Nested</h1>
 <script type="module" src="./nested.js"></script>
+
+<h1>no base path nested</h1>
+<link rel="stylesheet" href="asset/style.css" />
+<div class="relative-css">link style</div>
+<div class="relative-js"></div>
+<script src="asset/main.js" type="module"></script>