Svelte构建时配置相对路径文件夹的解决方案

Vite 驱动的 Svelte 项目 #

修改项目根目录的 vite.config.js（或 .ts），配置 base 参数控制资源路径：

• 若部署到子目录（如 https://your-domain.com/your-app/），设置 base 为子目录路径：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  base: '/your-app/'
});

• 若需要完全相对路径（适配任意部署目录），将 base 设为 './'：

base: './'

重新执行 npm run build，生成的 HTML、JS、CSS 中的所有资源引用都会自动转为相对路径，无需手动修改文件。

SvelteKit 项目 #

1. 在 svelte.config.js 中配置 paths.base（以静态适配器为例）：

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter(),
    paths: {
      base: '/your-app' // 对应部署的子目录，空字符串适配根目录或相对路径场景
    }
  }
};

2. 在 src/routes/+layout.js（或 .ts）中导出匹配的 base 值：

export const base = '/your-app';

构建后所有资源路径都会适配目标部署目录，避免根目录依赖导致的加载错误。

验证 #

执行构建后，检查输出目录（Vite 为 dist，SvelteKit 为 build）下的 index.html，资源链接应已变为相对路径或指定子目录的路径，JS/CSS 内部的资源引用也会同步更新。

内容的提问来源于stack exchange，提问作者dev.andre.lat