Набор Vue I18n небольшого размера

petite-vue-i18n - это альтернативная поставка Vue I18n, которая предоставляет только минимальные функции.

В чем разница от Vue I18n?

Размер меньше, чем у vue-i18n
- CDN или без Bundler
  - Уменьшение размера пакета: runtime + compiler ~32%, только runtime ~45%
  - petite-vue-i18n: runtime + compiler ~9.61KB, только runtime ~5.51KB (продуктовая сборка, сжатие brotli)
  - vue-i18n: runtime + compiler ~14.18KB, только runtime ~10.12KB (продуктовая сборка, сжатие brotli)
- ES Modules для браузера
  - Уменьшение размера пакета: runtime + compiler ~32%, только runtime ~45%
  - petite-vue-i18n: runtime + compiler ~10.51KB, только runtime ~6.20KB (продуктовая сборка, сжатие brotli)
  - vue-i18n: runtime + compiler ~15.40KB, только runtime ~11.12KB (продуктовая сборка, сжатие brotli)
- Размер приложения при сборке
  - Уменьшение размера по сравнению с vue-i18n: ~10% (измерения размера кода vue-i18n и petite-vue-i18n)
Устаревший API не поддерживается, только Composition API
APIs для следующих форматов даты и времени, чисел и утилит не включены. Только перевод
- n, $n
- d, $d
- rt, $rt
- tm, $tm
- getDateTimeFormat, setDateTimeFormat, mergeDateTimeFormat
- getNumberFormat, setNumberFormat, mergeNumberFormat
Обрабатываются только простые пары ключ-значение. Если вы хотите обрабатывать иерархические сообщения локализации, вам нужно настроить их с помощью API
Алгоритм резервного перевода локали порядок массива указан в fallbackLocale
Пользовательская директива v-t не включена
Следующие компоненты, предоставляемые vue-i18n, не включены
- Перевод i18n-t
- Формат даты и времени i18n-d
- Формат числа i18n-n

Сценарии использования `petite-vue-i18n`

vue-i18n включает различные функции i18n, такие как перевод, форматирование дат и чисел. Некоторые проекты могут использовать только перевод и не нуждаться в форматировании дат. В настоящее время даже в этом случае код этой функции будет включен.

Если ваш проект использует только API перевода t или $t, рекомендуется использовать petite-vue-i18n вместо vue-i18n. И если вашему проекту требуются функции vue-i18n, вы можете легко перейти от petite-vue-i18n к vue-i18n. Это означает постепенное расширение.

Установка

В основном это то же самое, что и установка vue-i18n. Единственное отличие заключается в том, что часть URL или части пути изменены с vue-i18n на petite-vue-i18n.

CDN

Вам нужно добавить следующие скрипты в конец <head>:

html

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/petite-vue-i18n"></script>

Вот код приложения с тегом скрипта:

html

<script>
const { createApp } = Vue
const { createI18n } = PetiteVueI18n

const i18n = createI18n({
  // параметры vue-i18n здесь ...
})

const app = createApp({
  // параметры vue здесь ...
})

app.use(i18n)
app.mount('#app')
</script>

Менеджеры пакетов

npmyarnpnpm

npm install petite-vue-i18n@next --save

yarn add petite-vue-i18n@next

pnpm add petite-vue-i18n@next

import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  // параметры vue-i18n здесь ...
})

const app = createApp({
  // параметры vue здесь ...
})

app.use(i18n)
app.mount('#app')

Использование

Привет, мир

Шаблон:

html

<div id="app">
  <h1>{{ t('hello world') }}</h1>
</div>

Скрипты:

const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n
// или для ES модулей
// import { createApp } from 'vue'
// import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      'hello world': 'Hello world!'
    },
    ja: {
      'hello world': 'こんにちは、世界！'
    }
  }
})

// определение компонента App
const App = {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

const app = createApp(App)

app.use(i18n)
app.mount('#app')

Использование того же резолвера сообщений и резервного выбора локали, что и `vue-i18n`

В petite-vue-i18n резолвер сообщений и резервный выбор локали используют простые реализации для оптимизации размера кода, как описано в разделе различий, как показано ниже:

резолвер сообщений
- Разрешает сообщения локали в формате ключ-значение
- О реализации см. здесь
резервный выбор локали
- Резервный выбор согласно порядку массива, указанному в fallbackLocale
- Если указана простая строковая локаль, происходит резервный выбор этой локали
- О реализации см. здесь

Если вы хотите использовать тот же резолвер сообщений и резервный выбор локали, что и vue-i18n, вы можете изменить их, используя API.

Обратите внимание, что на данный момент поддерживаются только бандлеры, такие как vite и webpack.

Вам нужно установить @intlify/core-base в ваш проект с помощью менеджера пакетов.

npmyarnpnpm

npm install --save @intlify/core-base@next

yarn add @intlify/core-base@next

pnpm add @intlify/core-base@next

Затем, в точке входа приложения, настройте резолвер сообщений и резервный выбор локали, используя API, как показано ниже:

import { createApp } from 'vue'
import {
  createI18n,
  registerMessageResolver, // регистрация API резолвера сообщений
  registerLocaleFallbacker, // регистрация API резервного выбора локали
} from 'petite-vue-i18n'
import {
  resolveValue, // резолвер сообщений vue-i18n, который используется по умолчанию
  fallbackWithLocaleChain // резервный выбор локали vue-i18n, который используется по умолчанию
} from '@intlify/core-base'

// регистрация резолвера сообщений vue-i18n
registerMessageResolver(resolveValue)

// регистрация резервного выбора локали vue-i18n
registerLocaleFallbacker(fallbackWithLocaleChain)

// какой-то код ...
// ...

С вышеуказанными настройками, разрешение сообщений локализации и резервный выбор будут обрабатываться так же, как в vue-i18n, но обратите внимание, что размер кода немного увеличится.

Настройка плагина бандлера

Если вы собираете свое приложение с помощью инструментария сборки, такого как vite, вы должны его настроить. Пожалуйста, установите опцию 'module' в конфигурации @intlify/unplugin-vue-i18n, как показано ниже.

NOTE

О настройке @intlify/unplugin-vue-i18n см. в разделе 'производительность' и документация @intlify/unplugin-vue-i18n

IMPORTANT

Версия @intlify/unplugin-vue-i18n должна быть 5.1.0 и выше

diff

 // vite.config.ts
 import { defineConfig } from 'vite'
 import { resolve, dirname } from 'node:path'
 import { fileURLToPath } from 'url'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

 export default defineConfig({
   /* ... */
   plugins: [
     /* ... */
     VueI18nPlugin({
       /* параметры */
+      module: 'petite-vue-i18n',
       // опция предварительной компиляции ресурсов сообщений локализации
       include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
     }),
   ],
 })

Переключение без изменения идентификатора импорта

Вы можете переключиться с vue-i18n на petite-vue-i18n в своем приложении, используя псевдоним npm, не меняя идентификатор импорта.

package.json:

diff

 {
   // ...
   "dependencies": {
     "vue": "^3.4.14",
-    "vue-i18n": "^10.0.0"
+    "vue-i18n": "npm:petite-vue-i18n@^10.0.0"
   },
 }

Вам нужно @intlify/unplugin-vue-i18n для сборки вашего приложения.

general

Variables

Functions

Interfaces

Type Aliases

vue

Interfaces

Набор Vue I18n небольшого размера

В чем разница от Vue I18n?

Сценарии использования `petite-vue-i18n`

Установка

CDN

Менеджеры пакетов

Использование

Привет, мир

Использование того же резолвера сообщений и резервного выбора локали, что и `vue-i18n`

Настройка плагина бандлера

Переключение без изменения идентификатора импорта

Набор Vue I18n небольшого размера ​

В чем разница от Vue I18n? ​

Сценарии использования petite-vue-i18n ​

Установка ​

CDN ​

Менеджеры пакетов ​

Использование ​

Привет, мир ​

Использование того же резолвера сообщений и резервного выбора локали, что и vue-i18n ​

Настройка плагина бандлера ​

Переключение без изменения идентификатора импорта ​

Набор Vue I18n небольшого размера

В чем разница от Vue I18n?

Сценарии использования `petite-vue-i18n`

Установка

CDN

Менеджеры пакетов

Использование

Привет, мир

Использование того же резолвера сообщений и резервного выбора локали, что и `vue-i18n`

Настройка плагина бандлера

Переключение без изменения идентификатора импорта