新版本Svelte中如何替换已弃用的files配置修改源码目录为frontend

新版SvelteKit确实移除了旧的files配置项，现在需要通过SvelteKit核心配置+Vite别名的组合来实现自定义源码目录，具体步骤如下：

1. 调整SvelteKit配置 #

在项目根目录的svelte.config.js（或.ts）中，通过kit选项指定核心目录的位置：

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    // 指定路由目录为frontend下的routes
    routes: 'frontend/routes',
    // 指定lib组件库目录位置
    lib: {
      source: 'frontend/lib'
    },
    // 若有自定义params目录，同样在这里指定
    // params: 'frontend/params'
  }
};

export default config;

2. 配置Vite别名 #

在vite.config.js中添加别名映射，确保项目中引用src/或$lib时能正确指向frontend目录：

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

export default defineConfig({
  plugins: [sveltekit()],
  resolve: {
    alias: {
      'src': '/frontend',
      '$lib': '/frontend/lib'
    }
  }
});

3. 迁移目录结构 #

将原src目录下的所有内容（routes、lib、hooks.server.js、hooks.client.js等）移动到根目录的frontend文件夹中，确保目录结构如下：

你的项目根目录
├── frontend/
│   ├── routes/
│   ├── lib/
│   ├── hooks.server.js
│   └── hooks.client.js
├── backend/
├── svelte.config.js
├── vite.config.js
└── package.json

4. （可选）TypeScript路径配置 #

如果项目使用TypeScript，需要修改tsconfig.json中的paths字段，保证类型检查能正确识别别名：

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "paths": {
      "src/*": ["frontend/*"],
      "$lib": ["frontend/lib"],
      "$lib/*": ["frontend/lib/*"]
    }
  }
}

完成以上步骤后，启动项目时SvelteKit会自动读取frontend目录下的源码，无需修改package.json中的启动脚本。

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