在服务类/普通JS文件中使用Svelte i18n报错如何解决

架构老林

2026-10-5

问题解答

核心原因

你直接在常量定义中调用_函数报错，是因为svelte-i18n导出的_是Svelte可读存储（Store）：

Svelte组件中使用的$_('翻译键')是Svelte原生支持的Store自动订阅语法，原生JS不支持该语法
你当前的代码是在模块加载阶段就初始化STATUTES常量，这时候i18n的词典、当前语言配置大概率还未加载完成，就算语法正确也拿不到有效翻译结果

可行解决方案

不需要把常量迁移到Svelte组件中，你可以直接在普通JS文件中调整实现方式即可：

方案1：封装为取值函数（适合不需要响应语言切换的场景）

导入Svelte的get方法读取Store当前值，把常量定义改为调用时才计算的函数：

// /services/constants.js
import { _ } from 'svelte-i18n'
import { get } from 'svelte/store'

export const STATUS_OK = 1;
export const STATUS_PENDING = 2;
export const STATUS_ERROR = 3;
export const STATUS_INACTIVE = 4;
export const STATUS_PRICE_NOT_FOUND = 5;

// 调用时才实时获取当前语言的翻译结果
export const getStatutes = () => {
  const translate = get(_)
  return {
    [STATUS_OK]: {
      text: translate('urls.statutes.ok'),
      class: 'text-green-500',
    },
    // 其余状态定义补充完整即可
  }
}

使用时直接调用getStatutes()即可拿到对应翻译的配置对象。

方案2：封装为派生Store（适合需要响应语言切换的场景）

用Svelte的derived方法基于翻译Store生成响应式的常量Store，语言切换时会自动更新翻译结果：

// /services/constants.js
import { _ } from 'svelte-i18n'
import { derived } from 'svelte/store'

export const STATUS_OK = 1;
export const STATUS_PENDING = 2;
export const STATUS_ERROR = 3;
export const STATUS_INACTIVE = 4;
export const STATUS_PRICE_NOT_FOUND = 5;

export const STATUTES = derived(_, ($translate) => ({
  [STATUS_OK]: {
    text: $translate('urls.statutes.ok'),
    class: 'text-green-500',
  },
  // 其余状态定义补充完整即可
}))

使用方式：