fix: import.meta.env.BASE_URL will be '/' in client loaded component on dev mode (#4886)

.changeset/four-suns-happen.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix: import.meta.env.BASE_URL will be '/' in client loaded component on dev mode

packages/astro/e2e/astro-envs.test.js

@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory({ root: './fixtures/astro-envs/' });
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async () => {
+	await devServer.stop();
+});
+
+test.describe('Astro Environment BASE_URL', () => {
+	test('BASE_URL', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/blog/'));
+
+		const astroBaseUrl = page.locator('id=astro-base-url');
+		await expect(astroBaseUrl, 'astroBaseUrl equals to /blog/').toHaveText('/blog/')
+		
+        const clientComponentBaseUrl = page.locator('id=client-component-base-url');
+        await expect(clientComponentBaseUrl, 'clientComponentBaseUrl equals to /blog').toHaveText('/blog/')
+	});
+});

packages/astro/e2e/fixtures/astro-envs/.gitignore

@@ -0,0 +1 @@
+!.env

packages/astro/e2e/fixtures/astro-envs/astro.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+// https://astro.build/config
+export default defineConfig({
+	site: 'http://example.com',
+	base: '/blog',
+	integrations: [vue()],
+});

packages/astro/e2e/fixtures/astro-envs/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-envs",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/vue": "workspace:*",
+    "astro": "workspace:*"
+  }
+}

packages/astro/e2e/fixtures/astro-envs/src/components/Client.vue

@@ -0,0 +1,13 @@
+<template>
+    <div id="client-component-base-url">{{ BASE_URL }}</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+			BASE_URL: import.meta.env.BASE_URL,
+    };
+  },
+};
+</script>

packages/astro/e2e/fixtures/astro-envs/src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import Client from '../components/Client.vue';
+
+const {BASE_URL} = import.meta.env
+---
+
+<div id="astro-base-url">{BASE_URL}</div>
+<Client client:load />

packages/astro/src/core/dev/index.ts

@@ -52,6 +52,9 @@ export default async function dev(
 			optimizeDeps: {
 				include: rendererClientEntries,
 			},
+			define: {
+				'import.meta.env.BASE_URL': settings.config.base ? `'${settings.config.base}'` : 'undefined',
+			},
 		},
 		{ settings, logging: options.logging, mode: 'dev' }
 	);

pnpm-lock.yaml

@@ -582,6 +582,14 @@ importers:
       astro: link:../../..
       preact: 10.11.0
 
+  packages/astro/e2e/fixtures/astro-envs:
+    specifiers:
+      '@astrojs/vue': workspace:*
+      astro: workspace:*
+    dependencies:
+      '@astrojs/vue': link:../../../../integrations/vue
+      astro: link:../../..
+
   packages/astro/e2e/fixtures/client-only:
     specifiers:
       '@astrojs/preact': workspace:*