feat: fix the use of vite.base in Astro Dev Server

.changeset/fresh-badgers-itch.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+The problem solved by this PR is that after setting the base, when pnpm runs dev, the src address of the generated script type="module" tag is incorrect and still starts with/node_modules. It should start with the value of base. I found that modifying the base of root does not work. I need to set vite.base so that it can parse correctly

packages/astro/src/container/index.ts

@@ -151,6 +151,7 @@ function createManifest(
 		clientDirectives: manifest?.clientDirectives ?? getDefaultClientDirectives(),
 		renderers: renderers ?? manifest?.renderers ?? [],
 		base: manifest?.base ?? ASTRO_CONFIG_DEFAULTS.base,
+		viteBase: manifest?.viteBase ?? '',
 		componentMetadata: manifest?.componentMetadata ?? new Map(),
 		inlinedScripts: manifest?.inlinedScripts ?? new Map(),
 		i18n: manifest?.i18n,
@@ -228,6 +229,7 @@ type AstroContainerManifest = Pick<
 	| 'renderers'
 	| 'assetsPrefix'
 	| 'base'
+	| 'viteBase'
 	| 'routes'
 	| 'assets'
 	| 'entryModules'

packages/astro/src/core/app/types.ts

@@ -48,6 +48,7 @@ export type SSRManifest = {
 	routes: RouteInfo[];
 	site?: string;
 	base: string;
+	viteBase: string | undefined;
 	trailingSlash: 'always' | 'never' | 'ignore';
 	buildFormat: 'file' | 'directory' | 'preserve';
 	compressHTML: boolean;

packages/astro/src/core/build/generate.ts

@@ -624,6 +624,7 @@ function createBuildManifest(
 		compressHTML: settings.config.compressHTML,
 		renderers,
 		base: settings.config.base,
+		viteBase: settings.config?.vite?.base,
 		assetsPrefix: settings.config.build.assetsPrefix,
 		site: settings.config.site,
 		componentMetadata: internals.componentMetadata,

packages/astro/src/core/build/plugins/plugin-manifest.ts

@@ -283,6 +283,7 @@ function buildManifest(
 		routes,
 		site: settings.config.site,
 		base: settings.config.base,
+		viteBase: settings.config?.vite?.base,
 		trailingSlash: settings.config.trailingSlash,
 		compressHTML: settings.config.compressHTML,
 		assetsPrefix: settings.config.build.assetsPrefix,

packages/astro/src/core/render-context.ts

@@ -389,6 +389,7 @@ export class RenderContext {
 		// calling the render() function will populate the object with scripts, styles, etc.
 		const result: SSRResult = {
 			base: manifest.base,
+			viteBase: manifest.viteBase,
 			cancelled: false,
 			clientDirectives,
 			inlinedScripts,

packages/astro/src/runtime/server/render/head.ts

@@ -27,6 +27,9 @@ export function renderAllHeadContent(result: SSRResult) {
 	const scripts = Array.from(result.scripts)
 		.filter(uniqueElements)
 		.map((script) => {
+			if(result.viteBase){
+				script.props.src = (result.base === '/' ? '' : result.base) + result.viteBase + script.props.src;
+			}
 			return renderElement('script', script, false);
 		});
 	const links = Array.from(result.links)

packages/astro/src/runtime/server/render/script.ts

@@ -20,5 +20,5 @@ export async function renderScript(result: SSRResult, id: string) {
 	}
 
 	const resolved = await result.resolve(id);
-	return markHTMLString(`<script type="module" src="${resolved}"></script>`);
+	return markHTMLString(`<script type="module" src="${result.viteBase ? ((result.base === '/' ? '' : result.base)+result.viteBase) : ''}${resolved}"></script>`);
 }

packages/astro/src/types/public/internal.ts

@@ -214,6 +214,7 @@ export interface SSRResult {
 	 */
 	cancelled: boolean;
 	base: string;
+	viteBase: string | undefined;
 	styles: Set<SSRElement>;
 	scripts: Set<SSRElement>;
 	links: Set<SSRElement>;

packages/astro/src/vite-plugin-astro-server/plugin.ts

@@ -179,6 +179,7 @@ export function createDevelopmentManifest(settings: AstroSettings): SSRManifest
 		clientDirectives: settings.clientDirectives,
 		renderers: [],
 		base: settings.config.base,
+		viteBase: settings.config?.vite?.base,
 		assetsPrefix: settings.config.build.assetsPrefix,
 		site: settings.config.site,
 		componentMetadata: new Map(),

packages/astro/test/astro-dev-headers.test.js

@@ -1,5 +1,6 @@
 import assert from 'node:assert/strict';
 import { after, before, describe, it } from 'node:test';
+import { load as cheerioLoad } from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
 describe('Astro dev headers', () => {
@@ -38,3 +39,36 @@ describe('Astro dev headers', () => {
 		});
 	});
 });
+
+describe('Astro dev with vite.base path', () => {
+	let fixture;
+	let devServer;
+	const headers = {
+		'x-astro': 'test',
+	};
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/astro-dev-headers/',
+			server: {
+				headers,
+			},
+			vite: {
+				base: '/hello'
+			}
+		});
+		await fixture.build();
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	it('Generated script src get included with vite.base path', async () => {
+		const result = await fixture.fetch('/hello');
+		const html = await result.text();
+		const $ = cheerioLoad(html);
+		assert.match($('script').attr('src'), /^\/hello\/@vite\/client$/);
+	});
+});