Миграция с Vue 2

`vue-i18n-bridge`

ПРИМЕЧАНИЕ

vue-i18n-bridge не будет предоставлен в версии 10 из-за завершения поддержки Vue 2. v9.13 будет последней версией.

Что такое `vue-i18n-bridge`?

vue-i18n-bridge - это мост, который делает процесс обновления максимально простым между [email protected] или более поздней версией и [email protected].

Он может использоваться в приложениях Vue 2, которые уже были созданы с помощью [email protected] или более поздней версии.

Кроме того, некоторые функции были перенесены из [email protected]:

Composition API Vue I18n, работающий на основе @vue/composition-api и vue-demi
Синтаксис форматирования сообщений, работающий на основе @intlify/message-compiler

Установка

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

npmyarnpnpm

npm install vue-i18n-bridge

yarn add vue-i18n-bridge

pnpm add vue-i18n-bridge

Перед использованием этой библиотеки необходимо установить следующие пакеты:

vue-i18n: >= v8.26.1 < v9
vue-demi: >= v0.13.5
@vue/composition-api: >= v1.2.0 (если вы используете Vue 2.6)

CDN

Для Vue 2.7:

Включите vue-i18n-bridge после vue, vue-demi, и он установится автоматически.

html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>

Для Vue 2.6:

Включите vue-i18n-bridge после vue, @vue/composition-api, vue-demi, и он установится автоматически.

html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>

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

Composition API

Для Vue 2.7:

import Vue from 'vue'
import { createApp } from 'vue-demi'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // необходимо указать опцию плагина '{ bridge: true }' при установке vue-i18n

// Опции `createI18n` почти совпадают с API vue-i18n ([email protected])
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n`, предоставляемый `vue-i18n-bridge`, имеет второй аргумент, вы **обязаны** передать конструктор `VueI18n`, предоставляемый `vue-i18n`

const app = createApp({
 setup() {
   // Опции `useI18n` почти совпадают с API vue-i18n ([email protected])
   const { t, locale } = useI18n()
   // ... сделать что-то

   return { t, locale }
 }
})

app.use(i18n) // необходимо установить экземпляр `i18n`, созданный с помощью `createI18n`
app.mount('#app')

Для Vue 2.6:

import Vue from 'vue'
import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // необходимо указать опцию плагина '{ bridge: true }' при установке vue-i18n

// Опции `createI18n` почти совпадают с API vue-i18n ([email protected])
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n`, предоставляемый `vue-i18n-bridge`, имеет второй аргумент, вы **обязаны** передать конструктор `VueI18n`, предоставляемый `vue-i18n`

const app = createApp({
 setup() {
   // Опции `useI18n` почти совпадают с API vue-i18n ([email protected])
   const { t, locale } = useI18n()
   // ... сделать что-то

   return { t, locale }
 }
})

app.use(i18n) // необходимо установить экземпляр `i18n`, созданный с помощью `createI18n`
app.mount('#app')

Legacy API

Для Vue 2.7:

import Vue from 'vue'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // необходимо указать опцию плагина '{ bridge: true }' при установке vue-i18n

// Опции `createI18n` почти совпадают с API vue-i18n ([email protected])
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n`, предоставляемый `vue-i18n-bridge`, имеет второй аргумент, вы **обязаны** передать конструктор `VueI18n`, предоставляемый `vue-i18n`

Vue.use(i18n) // необходимо установить экземпляр `i18n`, созданный с помощью `createI18n`

const app = new Vue({ i18n })
app.$mount('#app')

Для Vue 2.6:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // необходимо указать опцию плагина '{ bridge: true }' при установке vue-i18n

// Опции `createI18n` почти совпадают с API vue-i18n ([email protected])
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n`, предоставляемый `vue-i18n-bridge`, имеет второй аргумент, вы **обязаны** передать конструктор `VueI18n`, предоставляемый `vue-i18n`

Vue.use(i18n) // необходимо установить экземпляр `i18n`, созданный с помощью `createI18n`

const app = new Vue({ i18n })
app.$mount('#app')

Для TypeScript:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n, castToVueI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

// необходимо привести тип экземпляра `i18n`
const i18n = castToVueI18n(createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n))

Vue.use(i18n)

const app = new Vue({ i18n })
app.$mount('#app')

Использование UMD модуля в браузере

Для Vue 2.7

const { createApp } = VueDemi // экспортируемый UMD, называемый `VueDemi`
const { createI18n, useI18n } = VueI18nBridge // экспортируемый UMD, называемый `VueI18nBridge`

Vue.use(VueI18n, { bridge: true })

const i18n = createI18n({
  locale: 'ja',
  messages: {
    // ...
  }
}, VueI18n)

const app = createApp({}, {
  // ...
})
app.use(i18n)
app.mount('#app') // элемент контейнер приложения Vue

Для Vue 2.6

const { createApp } = VueCompositionAPI // экспортируемый UMD, называемый `VueCompositionAPI`
const { createI18n, useI18n } = VueI18nBridge // экспортируемый UMD, называемый `VueI18nBridge`

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

const i18n = createI18n({
  locale: 'ja',
  messages: {
    // ...
  }
}, VueI18n)

const app = createApp({}, {
  // ...
})
app.use(i18n)
app.mount('#app') // элемент контейнер приложения Vue

Ограничения

В режиме Legacy API вы не можете использовать новый синтаксис форматирования сообщений, перенесенные из vue-i18n
- использование возможно только в режиме Composition API
В режиме Legacy API вы не можете использовать перенесенные компоненты, соответствующие компонентам из vue-i18n
- Компоненты перевода: <i18n-t>
- Компоненты форматирования даты: <i18n-d>
- Компоненты форматирования чисел: <i18n-n>
В режиме Composition API следующие API с префиксом $ находятся в глобальной области видимости
- $t
- $d
- $n

Объяснение различных сборок

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

Через CDN или без сборщика

vue-i18n-bridge(.runtime).global(.prod).js:
- Для прямого использования через <script src="..."> в браузере. Экспортирует глобальный VueI18nBridge
- Компиляция формата сообщений в браузере:
  - vue-i18n-bridge.global.js - полная сборка, которая включает как компилятор, так и среду времени выполнения, поэтому она поддерживает компиляцию форматов сообщений на лету
  - vue-i18n-bridge.runtime.global.js содержит только среду времени выполнения и требует предварительной компиляции форматов сообщений на этапе сборки
- Встраивает все внутренние пакеты Vue I18n - т.е. это один файл без зависимостей от других файлов. Это означает, что вы должны импортировать всё из этого файла и только из него, чтобы убедиться, что получаете один и тот же экземпляр кода
- Содержит жестко заданные ветки prod/dev, и продакшн-сборка предварительно минимизирована. Используйте файлы *.prod.js для продакшна

ПРИМЕЧАНИЕ

Глобальные сборки не являются UMD сборками. Они собраны как IIFEs и предназначены только для прямого использования через <script src="...">.

vue-i18n-bridge(.runtime).esm-browser(.prod).js:
- Для использования через нативные импорты ES модулей (в браузере через <script type="module">)
- Разделяет ту же самую компиляцию времени выполнения, встраивание зависимостей и жестко заданное поведение prod/dev с глобальной сборкой

С помощью сборщика

vue-i18n-bridge(.runtime).esm-bundler.js:
- Для использования с сборщиками, такими как webpack, rollup и parcel
- Оставляет ветки prod/dev с защитой process.env.NODE_ENV (должны быть заменены сборщиком)
- Не поставляется в минифицированном виде (должен быть сделан вместе с остальным кодом после сборки)
- Импортирует зависимости (например, @intlify/core-base, @intlify/message-compiler)
  - Импортируемые зависимости также являются сборками esm-bundler и будут в свою очередь импортировать свои зависимости (например, @intlify/message-compiler импортирует @intlify/shared)
  - Это означает, что вы можете устанавливать/импортировать эти зависимости отдельно, не получая разных экземпляров этих зависимостей, но вы должны убедиться, что они все разрешаются в одну и ту же версию
- Компиляция локальных сообщений в браузере:
  - vue-i18n-bridge.runtime.esm-bundler.js - только среда времени выполнения, требует предварительной компиляции всех локальных сообщений. Это стандартный вход для сборщиков (через поле module в package.json), потому что при использовании сборщика шаблоны обычно предварительно компилируются (например, в *.json файлах)
  - vue-i18n-bridge.esm-bundler.js (по умолчанию): включает компилятор времени выполнения. Используйте это, если вы используете сборщик, но всё ещё хотите компиляцию локальных сообщений (например, шаблоны через строковые литералы JavaScript). Чтобы использовать эту сборку, измените вашу инструкцию импорта на: import { createI18n } from "vue-i18n-bridge/dist/vue-i18n-bridge.esm-bundler.js";

ПРИМЕЧАНИЕ

Если вы используете vue-i18n-bridge.runtime.esm-bundler.js, вам нужно будет предварительно скомпилировать все локальные сообщения, и вы можете сделать это с помощью .json (.json5) или .yaml, пользовательских блоков i18n для управления ресурсами i18n. Поэтому вы можете предварительно скомпилировать все локальные сообщения с помощью сборщика и следующего загрузчика / плагина.

@intlify/unplugin-vue-i18n

Для Node.js (серверная сторона)

vue-i18n-bridge.cjs(.prod).js:
- Для использования в Node.js через require()
- Если вы собираете своё приложение с webpack с target: 'node' и правильно экспортируете vue-i18n-bridge, эта сборка будет загружена
- Файлы dev/prod уже собраны, но подходящий файл автоматически требуется на основе process.env.NODE_ENV

`vue-i18n-composable`

Composition API поддерживается с Vue 3, и вы можете использовать официальный плагин @vue/composition-api, чтобы сделать Composition API доступным для Vue 2.

Composition API Vue I18n также доступен в Vue 2 с использованием плагина vue-i18n-composable.

О том, как использовать, см. здесь

ПРИМЕЧАНИЕ

vue-i18n-composable позволяет основному API Vue I18n v8.x работать с Composition API. Все Composition API, предоставленные в Vue I18n v9, недоступны.

general

Variables

Functions

Interfaces

Type Aliases

vue

Interfaces

Миграция с Vue 2

`vue-i18n-bridge`

Что такое `vue-i18n-bridge`?

Установка

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

CDN

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

Composition API

Legacy API

Использование UMD модуля в браузере

Для Vue 2.7

Для Vue 2.6

Ограничения

Объяснение различных сборок

Через CDN или без сборщика

С помощью сборщика

Для Node.js (серверная сторона)

`vue-i18n-composable`

Миграция с Vue 2 ​

vue-i18n-bridge ​

Что такое vue-i18n-bridge? ​

Установка ​

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

CDN ​

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

Composition API ​

Legacy API ​

Использование UMD модуля в браузере ​

Для Vue 2.7 ​

Для Vue 2.6 ​

Ограничения ​

Объяснение различных сборок ​

Через CDN или без сборщика ​

С помощью сборщика ​

Для Node.js (серверная сторона) ​

vue-i18n-composable ​

Миграция с Vue 2

`vue-i18n-bridge`

Что такое `vue-i18n-bridge`?

Установка

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

CDN

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

Composition API

Legacy API

Использование UMD модуля в браузере

Для Vue 2.7

Для Vue 2.6

Ограничения

Объяснение различных сборок

Через CDN или без сборщика

С помощью сборщика

Для Node.js (серверная сторона)

`vue-i18n-composable`