单文件组件

基本用法

如果您正在使用单文件组件构建 Vue 组件或 Vue 应用程序，可以使用 i18n 自定义块来管理本地化消息。

以下是在 单文件组件示例 中的内容：

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

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

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

在 i18n 自定义块中，本地化消息资源的格式默认为 json 格式。

由 i18n 自定义块定义的本地化消息，在单文件组件中用作局部作用域。

如果在模板中使用 $t('hello')，则引用由 i18n 自定义块定义的 hello 键。

注意

组合式 API 需要 useI18n 返回 setup 上下文，以便根据 i18n 自定义块中定义的本地化消息进行本地化。

关于 useI18n 的用法，请参见组合式 API

要使用 i18n 自定义块，您需要使用以下构建工具插件。

使用 Vite 构建

unplugin-vue-i18n

unplugin 是一个统一的构建工具插件系统，适用于 vite、webpack、rollup、esbuild 等。

为 vite 和 webpack 提供的 unplugin-vue-i18n。

要求

• 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({
      /* 选项 */
      // 本地化消息资源预编译选项
      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({
      /* 选项 */
      // 本地化消息资源预编译选项
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

Quasar CLI

如果要在 Quasar CLI 项目的单文件组件中添加对 <i18n> 标签的支持，我们需要修改现有配置。

为此，我们需要编辑项目根目录下的 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