Sveltekit基本使用

打包路径和短路径

Svelte kit不再依赖于vite相关配置，而是 svelte.config.js

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { resolve } from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter({ // 如果仅是 spa，请用 @sveltejs/adapter-static 打包
      pages: resolve('..', 'server','src', 'www'),  // 指定打包路径
      // assets: resolve('..', 'server','src',  'public'),
      fallback: 'index.html' // SPA 回退文件
    }),
    prerender: {
      entries: ['*'] // 强制所有路由生成 HTML
    },
    alias: {
      $lib: './src/lib', // 此处配置短路径，不要依赖 vite 短路径，会和sveltejs冲突
    },
  },
  compilerOptions: {
    warningFilter: (warning) => {
      // 忽略 a11y 相关警告
      if (warning.code.indexOf( 'a11y') > -1) return false;
      return true;
    },
  },
};

export default config;

它提供了几个内置的段路径，且默认 支持 ts, 在 .svelte-kit>tsconfig.ts中定义

	"paths": {
			"$": [
				"../src"
			],
			"$/*": [
				"../src/*"
			],
			"$lib": [
				"../src/lib"
			],
			"$lib/*": [
				"../src/lib/*"
			],
			"$app/types": [
				"./types/index.d.ts"
			]
		},

SvelteStore 的两种用法

1. 直接使用 writable store

定义方式：

import { writable } from 'svelte/store';

export const user = writable<UserType | null>(null);

在组件中更新：

import { user } from '$lib/stores';

// 设置整个 user 对象
user.set(updatedUser);

// 只更新部分字段
user.update(u => ({ ...u, nickname: '新昵称' }));

特点：

• 直接用 set 和 update 方法操作。
• 适合简单状态管理。

---

2. 封装自定义 store（带方法）

定义方式：

import { writable } from 'svelte/store';

function createUserStore() {
  const { subscribe, set, update } = writable<UserType | null>(null);

  return {
    subscribe,
    setUser: (user: UserType) => set(user),
    updateNickname: (nickname: string) => update(u => ({ ...u, nickname })),
    // 可以添加更多自定义方法
  };
}

export const user = createUserStore();

在组件中更新：

import { user } from '$lib/stores';

// 设置整个 user 对象
user.setUser(updatedUser);

// 只更新昵称
user.updateNickname('新昵称');

特点：

• 可以封装更多业务逻辑和方法，便于维护和扩展。
• 适合状态和操作较复杂的场景。

---

总结对比

方式	适用场景	更新方式	可扩展性
writable	简单状态	set, update	一般
自定义 store	复杂/多操作状态	自定义方法（如 setUser）	很强

---

实际开发中，简单状态用 writable，复杂状态建议用自定义 store 封装方法。