如何将Svelte及SvelteKit应用部署到本地Apache服务器并配置环境变量

SvelteKit 未做特殊配置时默认按根路径规则构建，仅修改静态资源的href属性无法适配子目录部署场景，需按以下步骤调整配置：

1. 调整适配器选择 #

如果是部署纯前端静态站点，首先确认使用adapter-static适配器，若当前项目使用其他适配器可先执行安装：
npm install @sveltejs/adapter-static --save-dev

2. 修改svelte.config.js配置 #

修改项目根目录下的svelte.config.js文件，添加路径配置，从环境变量读取子目录路径：

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    paths: {
      // 从环境变量读取子目录基础路径，本地开发时默认留空即可正常访问
      base: process.env.PUBLIC_SVELTEKIT_BASE || '',
    },
    // 配置统一添加末尾斜杠，避免Apache路由跳转异常
    trailingSlash: 'always'
  }
};

export default config;

3. 配置生产环境变量 #

在项目根目录新建.env.production文件，写入对应子目录路径参数，示例如下（将svelte-app替换为你在htdocs下创建的实际子文件夹名称）：

PUBLIC_SVELTEKIT_BASE=/svelte-app

4. 执行构建并部署 #

运行构建命令自动加载生产环境变量完成构建：
npm run build
构建完成后将项目build目录下的所有文件复制到XAMPP的htdocs/svelte-app目录即可。

5. 可选：前端路由适配配置 #

如果项目使用了前端路由（如+page.js配置的路由），需要在子目录下新增.htaccess文件配置Apache重写规则，避免刷新页面404：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /svelte-app/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /svelte-app/index.html [L]
</IfModule>

注意将上述代码中的/svelte-app/替换为你实际的子目录路径。

代码开发注意事项 #

所有代码中的静态资源引用、页面跳转路径都不要写死根路径，需引入$app/paths的base变量拼接路径，示例：

import { base } from '$app/paths';
// 图片引用路径示例
const imgPath = `${base}/assets/logo.png`;
// 页面跳转路径示例
const aboutPath = `${base}/about`;

内容的提问来源于stack exchange，提问作者Franco Zenatti