diff --git a/packages/plugin-vue/src/template.ts b/packages/plugin-vue/src/template.ts
index 5ff2fb39..107dfc2d 100644
--- a/packages/plugin-vue/src/template.ts
+++ b/packages/plugin-vue/src/template.ts
@@ -119,6 +119,7 @@ export function resolveTemplateCompilerOptions(
     if (filename.startsWith(options.root)) {
       assetUrlOptions = {
         base:
+          (options.devServer.config.server?.origin ?? '') +
           options.devServer.config.base +
           slash(path.relative(options.root, path.dirname(filename)))
       }
diff --git a/playground/vue-server-origin/Main.vue b/playground/vue-server-origin/Main.vue
new file mode 100644
index 00000000..20e73654
--- /dev/null
+++ b/playground/vue-server-origin/Main.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import asset from './assets/asset.png'
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/asset.png" />
+  <img alt="Vue logo" :src="asset" />
+</template>
diff --git a/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts b/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts
new file mode 100644
index 00000000..56c5f276
--- /dev/null
+++ b/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts
@@ -0,0 +1,10 @@
+import { isBuild } from 'testUtils'
+
+test('should render', async () => {
+  const expected = isBuild
+    ? /assets\/asset\.[0-9a-f]+\.png/
+    : /https:\/\/vue-server-origin\.test\/assets\/asset\.png/
+
+  expect(await page.getAttribute('img', 'src')).toMatch(expected)
+  expect(await page.getAttribute('img:nth-child(2)', 'src')).toMatch(expected)
+})
diff --git a/playground/vue-server-origin/assets/asset.png b/playground/vue-server-origin/assets/asset.png
new file mode 100644
index 00000000..1b3356a7
Binary files /dev/null and b/playground/vue-server-origin/assets/asset.png differ
diff --git a/playground/vue-server-origin/env.d.ts b/playground/vue-server-origin/env.d.ts
new file mode 100644
index 00000000..31dca6bb
--- /dev/null
+++ b/playground/vue-server-origin/env.d.ts
@@ -0,0 +1 @@
+declare module '*.png'
diff --git a/playground/vue-server-origin/index.html b/playground/vue-server-origin/index.html
new file mode 100644
index 00000000..13de0b72
--- /dev/null
+++ b/playground/vue-server-origin/index.html
@@ -0,0 +1,7 @@
+<div id="app"></div>
+<script type="module">
+  import { createApp, defineCustomElement } from 'vue'
+  import Main from './Main.vue'
+
+  createApp(Main).mount('#app')
+</script>
diff --git a/playground/vue-server-origin/package.json b/playground/vue-server-origin/package.json
new file mode 100644
index 00000000..869de55c
--- /dev/null
+++ b/playground/vue-server-origin/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "test-vue-server-origin",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:*"
+  }
+}
diff --git a/playground/vue-server-origin/vite.config.ts b/playground/vue-server-origin/vite.config.ts
new file mode 100644
index 00000000..46c00e4c
--- /dev/null
+++ b/playground/vue-server-origin/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import vuePlugin from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  base: '',
+  resolve: {
+    alias: {
+      '@': __dirname
+    }
+  },
+  plugins: [vuePlugin()],
+  server: {
+    origin: 'https://vue-server-origin.test'
+  },
+  build: {
+    // to make tests faster
+    minify: false
+  }
+})