配置SvelteKit子目录Base URL后开发环境localhost出现404错误的技术咨询

我完全懂你的困扰——生产环境部署在/activ子目录一切正常，但本地开发时却频繁404，这是因为开发服务器默认不会自动适配你设置的paths.base前缀，咱们一步步来搞定：

1. 配置Vite开发服务器的Base路径 #

SvelteKit依赖Vite作为开发服务器，我们需要让它在/activ路径下提供服务。在项目根目录的vite.config.js中添加server.base配置：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	server: {
		base: '/activ/'
	}
});

2. 让<base>标签只在生产环境生效 #

你之前在routes/index.svelte里加的<base href="/activ">会在开发环境导致路径冲突（因为Vite已经给所有请求加了一次前缀），我们可以用SvelteKit的环境变量让它只在生产环境加载。建议把这个配置放到全局的routes/+layout.svelte（旧版SvelteKit用__layout.svelte）里，确保所有页面都能生效：

<svelte:head>
	{#if import.meta.env.PROD}
		<base href="/activ">
	{/if}
</svelte:head>

<!-- 保留你的布局内容 -->
<slot />

3. 重启开发服务器 #

修改完配置后，重启npm run dev，现在访问http://localhost:3000/activ就能正常打开应用了——开发环境的路由跳转、资源请求都会自动适配这个子目录前缀，和生产环境的行为完全一致。

额外小贴士 #

• 如果你用的是SvelteKit 1.0之前的版本，路由结构会略有不同，但核心逻辑不变：让Vite开发服务器和生产环境使用相同的base路径。
• 这样配置后，你不用手动修改任何路由跳转代码（比如$navigate('/about')），SvelteKit会自动帮你加上/activ前缀。

内容的提问来源于stack exchange，提问作者Tom Doe