From 61d26f3352bb701ccce04dece4e1879b007f0ccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E9=9B=A8=E8=88=AA?= <dong_yu_hang@126.com>
Date: Wed, 5 Oct 2022 00:57:35 +0800
Subject: [PATCH] fix: import.meta.env.BASE_URL will be '/' in client loaded
 component on dev mode (#4886)

---
 .changeset/four-suns-happen.md                |  5 ++++
 packages/astro/e2e/astro-envs.test.js         | 26 +++++++++++++++++++
 .../astro/e2e/fixtures/astro-envs/.gitignore  |  1 +
 .../e2e/fixtures/astro-envs/astro.config.mjs  |  9 +++++++
 .../e2e/fixtures/astro-envs/package.json      |  9 +++++++
 .../astro-envs/src/components/Client.vue      | 13 ++++++++++
 .../fixtures/astro-envs/src/pages/index.astro |  8 ++++++
 packages/astro/src/core/dev/index.ts          |  3 +++
 pnpm-lock.yaml                                |  8 ++++++
 9 files changed, 82 insertions(+)
 create mode 100644 .changeset/four-suns-happen.md
 create mode 100644 packages/astro/e2e/astro-envs.test.js
 create mode 100644 packages/astro/e2e/fixtures/astro-envs/.gitignore
 create mode 100644 packages/astro/e2e/fixtures/astro-envs/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/astro-envs/package.json
 create mode 100644 packages/astro/e2e/fixtures/astro-envs/src/components/Client.vue
 create mode 100644 packages/astro/e2e/fixtures/astro-envs/src/pages/index.astro

diff --git a/.changeset/four-suns-happen.md b/.changeset/four-suns-happen.md
new file mode 100644
index 0000000000..88bb8bc7e7
--- /dev/null
+++ b/.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
diff --git a/packages/astro/e2e/astro-envs.test.js b/packages/astro/e2e/astro-envs.test.js
new file mode 100644
index 0000000000..b80a4fc5fe
--- /dev/null
+++ b/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/')
+	});
+});
diff --git a/packages/astro/e2e/fixtures/astro-envs/.gitignore b/packages/astro/e2e/fixtures/astro-envs/.gitignore
new file mode 100644
index 0000000000..8e0776e8d2
--- /dev/null
+++ b/packages/astro/e2e/fixtures/astro-envs/.gitignore
@@ -0,0 +1 @@
+!.env
diff --git a/packages/astro/e2e/fixtures/astro-envs/astro.config.mjs b/packages/astro/e2e/fixtures/astro-envs/astro.config.mjs
new file mode 100644
index 0000000000..1fee9eb36b
--- /dev/null
+++ b/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()],
+});
diff --git a/packages/astro/e2e/fixtures/astro-envs/package.json b/packages/astro/e2e/fixtures/astro-envs/package.json
new file mode 100644
index 0000000000..4309d0833e
--- /dev/null
+++ b/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:*"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/astro-envs/src/components/Client.vue b/packages/astro/e2e/fixtures/astro-envs/src/components/Client.vue
new file mode 100644
index 0000000000..9e821c6c2f
--- /dev/null
+++ b/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>
diff --git a/packages/astro/e2e/fixtures/astro-envs/src/pages/index.astro b/packages/astro/e2e/fixtures/astro-envs/src/pages/index.astro
new file mode 100644
index 0000000000..7ca64e96cb
--- /dev/null
+++ b/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 />
diff --git a/packages/astro/src/core/dev/index.ts b/packages/astro/src/core/dev/index.ts
index 05b59e1a08..535d74986b 100644
--- a/packages/astro/src/core/dev/index.ts
+++ b/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' }
 	);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2fe99b52eb..6d9bde6090 100644
--- a/pnpm-lock.yaml
+++ b/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:*