Svelte项目改 SvelteKit 项目

要将一个普通的 Svelte 项目转换为 SvelteKit 项目，可以按照以下步骤进行：

1. 安装 @sveltejs/kit 依赖
在你的项目根目录下，使用以下命令来安装 SvelteKit 及其必要的依赖项：

npm install @sveltejs/kit

2. 修改 svelte.config.js
更新或替换项目的 svelte.config.js 文件以包含 SvelteKit 所需的配置。例如：

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

export default {
  kit: {
    adapter: adapter(),
    target: '#svelte',
    // 其他 SvelteKit 配置
  },
  preprocess: preprocess(),
};

这个配置导入了 SvelteKit 所需的 adapter，并设置了预处理器 svelte-preprocess 来支持 TypeScript、SCSS 等预处理语言。

3. 重构项目目录结构
SvelteKit 使用文件系统路由，因此你需要将现有的组件和页面文件重构到 SvelteKit 推荐的目录结构中。

创建 src/routes 目录：SvelteKit 自动将 src/routes 中的文件映射为页面或 API 路由。

将你现有的页面（例如 App.svelte）移动到 src/routes/+page.svelte 文件中。如果有多个页面组件，也将它们放入 routes 目录，命名为 +page.svelte，例如：

src/
├── routes/
│   ├── +page.svelte    # 主页面
│   └── about/
│       └── +page.svelte # 关于页面

静态资源：SvelteKit 的静态文件放在 static 目录中。你可以把图片等静态文件移到 static/ 文件夹中。

4. 更新 package.json 脚本
SvelteKit 需要使用不同的启动和构建命令，确保你更新 package.json 中的 scripts 部分：

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  }
}

dev: 启动开发服务器。
build: 打包项目。
preview: 运行构建后的项目进行预览。

5. 检查 index.html
SvelteKit 项目通常不需要手动创建 index.html 文件。页面的 index.html 是由框架自动处理的，所以你可以移除任何现有的 index.html 文件。模板 HTML 是在 src/app.html 中定义的，你可以在那里定制页面的基础结构。

6. 启动开发服务器
完成修改后，运行以下命令来启动开发服务器，测试项目是否正常工作：

npm run dev

SvelteKit 的默认开发服务器会在 http://localhost:5173/ 启动，你可以在浏览器中访问并查看你的项目。

7. 调整适配器
SvelteKit 使用适配器来处理构建后的项目部署。默认使用 @sveltejs/adapter-auto，但你也可以选择不同的适配器（例如静态网站适配器 @sveltejs/adapter-static 或 Node.js 适配器 @sveltejs/adapter-node）。根据你的需求安装并配置适配器：

npm install @sveltejs/adapter-static

然后在 svelte.config.js 中配置它：

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

export default {
  kit: {
    adapter: adapter(),
    // 其他配置
  }
};

8. 调整代码
由于 SvelteKit 使用文件系统路由和特定的文件结构，你可能需要重构部分代码来适应 SvelteKit 的路由系统。如果你之前的项目依赖手动设置路由，现在可以利用 SvelteKit 的自动路由系统来简化开发。

通过这些步骤，你可以将一个普通的 Svelte 项目转化为一个 SvelteKit 项目，并开始使用 SvelteKit 的强大功能，如文件系统路由、SSR（服务器端渲染）和适配器支持等。