fix(plugin-vue): use server.origin when building base for transformAssetUrls (#8077)

Author: segevfiner

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)))
       }

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>

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)
+})

playground/vue-server-origin/assets/asset.png

@@ -0,0 +1 @@
+declare module '*.png'

playground/vue-server-origin/env.d.ts

@@ -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>

playground/vue-server-origin/index.html

@@ -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:*"
+  }
+}

playground/vue-server-origin/package.json

@@ -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
+  }
+})