Однофайловые компоненты

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

Если вы создаете компоненты Vue или приложения Vue с использованием однофайловых компонентов, вы можете управлять локализованными сообщениями с помощью пользовательского блока i18n.

Следующий пример в примере однофайловых компонентов:

<script>
export default {
  name: 'App'
}
</script>

<template>
  <label for="locale">locale</label>
  <select v-model="$i18n.locale">
    <option>en</option>
    <option>zh</option>
  </select>
  <p>message: {{ $t('hello') }}</p>
</template>

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "zh": {
    "hello": "你好，世界！"
  }
}
</i18n>

В пользовательских блоках i18n формат ресурса локализованных сообщений по умолчанию имеет формат json.

Локализованные сообщения, определенные в пользовательских блоках i18n, используются как локальная область видимости в однофайловых компонентах.

Если используется $t('hello') в шаблоне, то будет использоваться ключ hello, определенный в пользовательском блоке i18n.

ПРИМЕЧАНИЕ

Composition API требует, чтобы useI18n возвращал контекст setup, чтобы можно было локализовать с помощью ссылки на локализованные сообщения, определенные в пользовательских блоках i18n.

О том, как использовать useI18n, см. Composition API

Для использования пользовательских блоков i18n вам нужно использовать следующие плагины для сборщика.

Сборка с Vite

unplugin-vue-i18n

unplugin - это унифицированная система плагинов для инструментов сборки, таких как vite, webpack, rollup, esbuild и т.д.

unplugin-vue-i18n для vite и webpack.

ТРЕБОВАНИЯ

• vite: v3 или выше
• @vitejs/plugin-vue: v3.2.0 или выше.

Установка

npm

npm install @intlify/unplugin-vue-i18n -D

yarn

yarn add @intlify/unplugin-vue-i18n -D

pnpm

pnpm add -D @intlify/unplugin-vue-i18n

Настройка плагина для Vite

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

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

Настройка плагина для Webpack

// webpack.config.js
const path = require('path')
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // опция предварительной компиляции ресурсов локализованных сообщений
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

Quasar CLI

Если мы хотим добавить поддержку тега <i18n> внутри однофайлового компонента в проекте Quasar CLI, тогда нам нужно изменить существующую конфигурацию.

Для этого нужно отредактировать quasar.conf.js в корневой директории проекта:

{
  chain => {
    chain.module
      .rule('i18n-resource')
        .test(/\.(json5?|ya?ml)$/)
          .include.add(path.resolve(__dirname, './src/i18n'))
          .end()
        .type('javascript/auto')
        .use('i18n-resource')
          .loader('@intlify/vue-i18n-loader')
    chain.module
      .rule('i18n')
        .resourceQuery(/blockType=i18n/)
        .type('javascript/auto')
        .use('i18n')
          .loader('@intlify/vue-i18n-loader')
  }
}

Также нужно убедиться, что установлен @intlify/vue-i18n-loader:

npm

npm install @intlify/vue-i18n-loader -D

yarn

yarn add @intlify/vue-i18n-loader -D

pnpm

pnpm add -D @intlify/vue-i18n-loader