diff --git a/packages/plugin-vue/src/template.ts b/packages/plugin-vue/src/template.ts index 5ff2fb399829f2..107dfc2d163495 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 00000000000000..20e736542ec9cb --- /dev/null +++ b/playground/vue-server-origin/Main.vue @@ -0,0 +1,8 @@ + + + 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 00000000000000..56c5f276490c6b --- /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 00000000000000..1b3356a746b8bb 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 00000000000000..31dca6bb40c906 --- /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 00000000000000..13de0b72c23782 --- /dev/null +++ b/playground/vue-server-origin/index.html @@ -0,0 +1,7 @@ +
+ diff --git a/playground/vue-server-origin/package.json b/playground/vue-server-origin/package.json new file mode 100644 index 00000000000000..869de55c22ee3d --- /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 00000000000000..46c00e4c5c16a8 --- /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 + } +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c9e2f58cd9789..953a97be252b82 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -979,6 +979,15 @@ importers: devDependencies: '@vitejs/plugin-vue': link:../../packages/plugin-vue + playground/vue-server-origin: + specifiers: + '@vitejs/plugin-vue': workspace:* + vue: ^3.2.25 + dependencies: + vue: 3.2.33 + devDependencies: + '@vitejs/plugin-vue': link:../../packages/plugin-vue + playground/vue-sourcemap: specifiers: '@vitejs/plugin-vue': workspace:*