diff --git a/packages/playground/ssr-vue/src/pages/Home.vue b/packages/playground/ssr-vue/src/pages/Home.vue
index f96fb6b4d5a66a..827bfd82ba7f7f 100644
--- a/packages/playground/ssr-vue/src/pages/Home.vue
+++ b/packages/playground/ssr-vue/src/pages/Home.vue
@@ -13,11 +13,13 @@
 <script setup>
 import foo from '@foo'
 import { reactive, defineAsyncComponent } from 'vue'
-import ImportType from '../components/ImportType.vue'
+const ImportType = load('ImportType')
 const Foo = defineAsyncComponent(() =>
   import('../components/Foo').then((mod) => mod.Foo)
 )
-
+function load(file) {
+  return defineAsyncComponent(() => import(`../components/${file}.vue`))
+}
 const state = reactive({ count: 0 })
 </script>
 
diff --git a/packages/vite/src/node/ssr/ssrModuleLoader.ts b/packages/vite/src/node/ssr/ssrModuleLoader.ts
index bb41af0f49a67e..3ee706740f3c60 100644
--- a/packages/vite/src/node/ssr/ssrModuleLoader.ts
+++ b/packages/vite/src/node/ssr/ssrModuleLoader.ts
@@ -100,6 +100,11 @@ async function instantiateModule(
     if (isExternal(dep)) {
       return Promise.resolve(nodeRequire(dep, mod.file, server.config.root))
     } else {
+      // #3087 dynamic import vars is ignored at rewrite import path,
+      // so here need process relative path
+      if (dep.startsWith('.')) {
+        dep = path.posix.resolve(path.dirname(url), dep)
+      }
       return ssrLoadModule(dep, server, context, urlStack.concat(url))
     }
   }