怎么说呢，

常见痛点

• ❓SSR 与语言检测冲突：在服务端没有 window/navigator导致直接读取浏览器语言报错。
• ❓SEO 友好：搜索引擎只能抓取到一次渲染的内容。若语言只在客户端切换，会丢失爬虫可见的多语言页面。
• ❓Bundle 大小：引入完整的国际化库会显著增加首屏体积，尤其在移动端。
• ❓类型安全与 IDE 自动补全：手写字符串键容易出错，缺乏编辑器提示。
• ❓语言持久化：使用者切换后希望记住偏好，需在 localStorage/Cookie 中同步。老实说，

方案对比

方案一的观点是。自定义 Store

*痛点解决*： 零额外依赖、完全可控、天然兼容 SSR 与 Cookie。

. 目录结构

src/lib/i18n/
├── translations.ts # 翻译数据聚合
├── index.ts # 导出接口
└── locales/
├── zh.ts # 中文
└── en.ts # 英文

. 翻译文件示例

// src/lib/i18n/locales/zh.ts
export const zh = {
再看nav。{
至于home，'首页',about: '关于'
},welcome: '欢迎'
};不过，// src/lib/i18n/locales/en.ts
export const en = {
nav这方面。{
home这方面，'Home',about: 'About'
},welcome: 'Welcome'
};

. 主要实现：translations.ts & utils

// src/lib/i18n/translations.ts
import { zh } from './locales/zh';import { en } from './locales/en';export const translations = { zh,en };不过，export type Language = keyof typeof translations;export type TranslationType = typeof zh;// 检测浏览器语言
export function detectLang: Language {
if return 'zh';const lang = navigator.language.toLowerCase;return lang.startsWith?'zh' : 'en'，}
// 从 localStorage 读取持久化语言
export function getStoredLang: Language | null {
if return null;const stored = localStorage.getItem;return stored === 'zh' || stored === 'en'?stored : null;}

// src/lib/i18n/index.ts
import { writable。derived,get } from 'svelte/store';import { translations,detectLang,getStoredLang。type Language } from './translations';// 初始语言：优先本地存储 → 浏览器检测
const initialLang = getStoredLang || detectLang;// 当前语言 Store
export const currentLang = writable;老实说，// 翻译函数 Store：$t
export const t = derived => {
return : string => {
const keys = key.split;let value: any = translations;for value = value?.，return typeof value === 'string'?value : key，// 回退到 key 本身
};})，// 切换语言并同步到 localStorage
export function setLang {
currentLang.set;老实说，if localStorage.setItem;}
// 非响应式获取当前语言
export function getLang: Language {
return get;怎么说呢，}

. 在组件中使用

. 写法对比小结

. SSR 支持：服务端预加载翻译 + Cookie 同步

*痛点解决*： SvelteKit 原生 SSR 能够在服务器阶段读取 URL、Cookie 或 Header 来决定渲染哪种语言。从而保证 SEO 与首屏即有正确文字。按理说，

. Cookie 工具函数

// src/lib/i18n/cookies.ts
import type { Cookies } from '@sveltejs/kit';export function getLangFromCookies: Language {
const stored = cookies.get;return stored === 'zh' || stored === 'en'?
stored : 'zh';老实说，}
export function setLangCookie {
cookies.set('lang'。lang,{
至于path，'/',maxAge: 60 * 60 * 24 * 365 // 1 年
});}

. Layout Load

// src/routes/+layout.ts
import type { LayoutLoad } from './$types';import { translations } from '$lib/i18n/translations';import { getLangFromCookies,setLangCookie } from '$lib/i18n/cookies';export const load: LayoutLoad = => {
const urlParam = url.searchParams.get;说起来，const lang = urlParam === 'en'?话说回来，'en' : getLangFromCookies;按理说，setLangCookie;// 同步到客户端
const t = translations;return { lang,t };}，

. Layout.svelte

{@render children}

*关键流程*： 

1. User accesses /?说起来，lang=en→ Server reads URL → sets cookie → renders English HTML.
2. The client loads page →setLangsyncs store → UI already shows English.
3. User clicks switch → client redirects to/?lang=zh → Server renders Chinese version.
4. Crawler can directly request each URL → SEO 完整覆盖两种语言。
:

. SSR 注意事项

- 在任何涉及浏览器 API 的地方必须先判断是否在浏览器环境或使用 `onMount`。

方案二这方面，svelte-i18n

社区最流行、API 简洁、支持懒加载和运行时切换。适合轻量前端项目或不需要深度 SSR 控制的场景。

安装与初始化

bash npm i svel te-i 1 n

typescript // src/lib i18 n .ts import{ register。init,getLocaleFromNavigator,locale}from ’ svel te -i1 n ’;

// 注册懒加载文件 register=> import);register=> import);

// 初始化配置 init});

// 导出切换函数 export{ locale };exportconst setLocale ==>locale.set;

在 SvelteKit 中引入

typescript // src/routes/+ layout .ts import{browser}from'$app/environment';import{locale,waitLocale}from'svel te -i1 n';import'$ lib /i18 n';// 执行初始化

export const load= async=>{ if{ const saved=localStorage.getItem;if locale.set;} await waitLocale;// 等待异步加载完成 return {};}，

组件内使用示例