Vue I18n的安装与使用

什么是vue I18n？

Vue I18n 是 Vue.js 的国际化插件。 它可以轻松地将一些本地化功能集成到您的 Vue.js 应用程序中。

安装

兼容性说明

• Vue.js 3.0.0+

全局引入

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

也可以使用特定版本，例如：https://unpkg.com/vue-i18n@9.1.0/dist/vue-i18n.global.js

ES模块引入

<script type="module" src="https://unpkg.com/vue@3/dist/vue.esm-browser.js">
<script type="module" src="https://unpkg.com/vue-i18n@9/dist/vue-i18n.esm-browser.js">

也可以使用特定版本，例如：https://unpkg.com/vue-i18n@9.1.0/dist/vue-i18n.esm-browser.js

包管理

npm install vue-i18n@9

当你与模块系统一起使用，必须使用app.use()显示的安装vue-i18n

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

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

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

i18n的使用

直接引用

消息源配置

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

引用

<p>{{ $t('message.hello') }}</p>

输出

<p>hello world</p>

使用变量

消息源配置

const messages = {
  en: {
    message: {
      hello1: '{msg} world1',
      hello2: '{0} world2',
      address: "{account}{'@'}{domain}" // vue2不支持{'@'}的写法，会直接当作文本输出
    }
  }
}

引用

1. <p>{{ $t('message.hello1', { msg: 'hello' }) }}</p>
2. <p>{{ $t('message.hello2', ['hello']) }}</p>
3. <p>email: {{ $t('address', { account: 'foo', domain: 'domain.com' }) }}</p>

输出

1. <p>hello world1</p>
2. <p>hello world2</p>
3. <p>email: foo@domain.com</p>

链接消息

链接消息
如果有一个区域设置消息键始终具有与另一个键相同的具体文本，您只需链接到它即可。

要链接到另一个区域设置消息键，您所要做的就是在其内容前面添加@:key符号，后跟区域设置消息键的全名，包括要链接到的命名空间。

消息源配置

const messages = {
  en: {
    message: {
      the_world: 'the world',
      dio: 'DIO:',
      linked: '@:message.dio @:message.the_world !!!!'
    }
  }
}

它是在对象中具有层次结构的环境。

message.linked 包含 message.the_world 和 message.dio，它通过 message.dio 和 message.the_world 链接到语言环境消息键。

引用

<p>{{ $t('message.linked') }}</p>

输出

<p>DIO: the world !!!!</p>

内置修饰符

内置修饰符
如果语言区分字符大小写，您可能需要控制链接的区域设置消息的大小写。 链接消息可以使用修饰符 @.modifier:key 进行格式化

当前内置了以下修饰符。

• upper：链接消息中的所有字符大写
• lower：小写链接消息中的所有字符
• capitalize：将链接消息中的第一个字符大写

消息源配置

const messages = {
  en: {
    message: {
      homeAddress: 'Home address',
      missingHomeAddress: 'Please provide @.lower:message.homeAddress'
    }
  }
}

它是在对象中具有层次结构的环境。

message.homeAddress具有Home address。message.missingHomeAddress 有设置@.lower:message.homeAddress，它通过 message.homeAddress 链接到区域设置消息键。

由于在上面的示例中指定了修饰符 .lower，因此链接的 message.homeAddress 键已解析，然后对其进行求值。

引用

<label>{{ $t('message.homeAddress') }}</label>
<p class="error">{{ $t('message.missingHomeAddress') }}</p>

输出

<label>Home address</label>
<p class="error">Please provide home address</p>

自定义修饰符

如果想使用非内置修饰符，可以使用自定义修饰符。

要使用自定义修饰符，必须在 createI18n 的修饰符选项中指定它们：

const i18n = createI18n({
  locale: 'en',
  messages: {
    // 设置本地消息...
  },
  // 在modifiers属性中设置自定义修饰符
  modifiers: {
    snakeCase: (str) => str.split(' ').join('_')
  }
})

消息源配置

const messages = {
  en: {
    message: {
      snake: 'snake case',
      custom_modifier: "custom modifiers example: @.snakeCase:{'message.snake'}" // vue2中需要将{'message.snake'}替换为(message.snake)
    }
  }
}

引用

<label>{{ $t('message.custom_modifier') }}</label>

输出

<label>custom modifiers example: snake_case</label>

特殊字符（vue2不存在特殊字符）

消息格式语法中使用的以下字符被编译器作为特殊字符处理：

• {
• }
• @
• $
• |
  如果要使用这些特殊字符，需要使用文字插值，例如：{'@'}

vue-i18n的更多使用