国际化 I18n的使用

1、什么是i18n国际化？

国际化（Internationalization）指的是同一个网站可以支持多种不同的语言，以方便不同国家，不同语种的用户访问。因此在很多大型的项目中肯定是需要做国际化支持多种语言的，因英文名 Internationalization 单词太复杂，所以取第一个字母（I）和最后一个字母（n），中间还有18个英文字母，故而取名为 I18n。

2、I18n 中文文档

引入的方式很多，可以在html文档中引入使用，也可以在项目中使用，值得注意的是针对vue2.x 和vue3.x 项目下的使用略有区别，详情可参考文档

3、步骤

第一步：项目中安装 vue-i18n

npm install vue-i18n

第二步：创建本地语言包

// index.ts

import { createI18n } from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'

const messages = {
  en: {
    ...enLocale
  },
  zh: {
    ...zhLocale
  }
}

export default createI18n({
  legacy:false, // 使用 vue3 组合式API 时必须设置为 false
  locale: 'zh',
  messages
})

/**
 * createI18n({
 *  locale  // 本地默认语言
 *  fallbackLocale    // 备用语言（第一语言locale不存在时生效）
 *  legacy    // 使用 vue3 组合式API 时必须设置为 false
 *  messages // 配置对象
 * })
 *
*/

第三步：全局引入注册

第四步：项目模块中使用

以上是本人使用的过程，如有其他小伙伴还有更好的建议欢迎评论区留言一起交流~~

国际化 I18n的使用

猜你喜欢