vue项目 i18n 国际化完整教程

国际化介绍

国际化对于跨国项目至关重要，因为它可以让项目适应不同国家的语言和文化，为不同客户提供更好的使用体验。具体而言，国际化可以让项目根据不同国家的语言进行翻译，并支持多语言切换，让不同国家的客户都能够方便地使用项目。这不仅可以提升项目的用户满意度，还能够扩大项目的市场范围，提高项目的商业价值。

基本思路如下

1. 安装语言包

2. 定义语言包

3. 在vue实例挂载 vue-i18n类对象

下面具体讲解

使用

i18n是为了方便书写和记忆而产生的缩写。它是一个能够帮助Vue应用实现国际化功能的插件，可以快速地将一些本地化功能集成到Vue应用程序中，提高用户体验和跨语言适配性。

1. 安装插件 vue- i18n

这里建议安装 7.3.2 版本

npm install [email protected]

在 main.js 中导入并使用

1. import i18n from './lang' // internationalization
2. Vue.use(VueI18n)
3. Vue.use(ElementUI, {
      i18n: (key, value) => i18n.t(key, value)
    })
4. new Vue({
      el: '#app',
      i18n,
      render: h => h(App)
    })

2. 创建语言包

在src目录下创建 lang 文件夹，里面包含 index.js、en.js、zh.js 等文件夹

// 在 index.js 文件进行配置
// 导入所需的库和资源： 代码中导入了 Vue.js 框架、Vue I18n 扩展以及各种语言版本的翻译资源，包括 Element UI 组件库的翻译。
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
import esLocale from './es'
import jaLocale from './ja'

// 启用 Vue I18n：使其可以在 Vue 应用中使用。
Vue.use(VueI18n)

// 定义翻译信息： 创建一个名为 messages 的对象，其中包含不同语言的翻译信息。每个语言都由一个键值对表示，包括自定义的应用文本翻译和 Element UI 组件库的翻译信息。
const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
// 确定用户语言偏好： 定义名为 getLanguage 的函数，根据用户选择的语言和浏览器语言设置来确定应该使用的语言。如果用户未选择语言或浏览器语言无匹配项，则默认使用英语。
export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'en'
}

// 创建 Vue I18n 实例： 使用 VueI18n 的构造函数创建一个名为 i18n 的实例。在构造函数中，通过传递当前语言代码和翻译信息来初始化实例。
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages
})

// 导出 I18n 实例
export default i18n

// zh.js
export default {
  route: {
    dashboard: '首页',
    documentation: '文档',
    guide: '引导页'
    }
}

// en.js
export default {
  route: {
    dashboard: 'Dashboard',
    documentation: 'Documentation',
    guide: 'Guide'
    }
}

3. 在组件中使用

•  定制切换语言组件。创建LangSelect文件夹

•  在页面中使用组件

// 1. 引入LangSelect组件
import LangSelect from '@/components/LangSelect'
// 2. 注册组件
export default {
  components: {
    LangSelect
  }
}

// 3. 使用

4. 页面标题国际化 & router中调用this.$t()会报错，无法使用

1. 在utils 文件夹下创建 i18n.js

当页面需要显示标题时，这个函数会根据传入的原始标题，尝试从翻译资源中获取对应的翻译文本。如果找到了与原始标题匹配的翻译键，函数将返回该翻译文本作为页面的标题；否则，它将保持原始标题不变。这个机制允许应用根据用户的语言偏好，动态地在不同语言版本之间切换页面标题，提供更好的用户体验。

定义generateTitle 函数

export function generateTitle(title) {
  const hasKey = this.$te('route.' + title)

  if (hasKey) {
    // $t :this method from vue-i18n, inject in @/lang/index.js
    const translatedTitle = this.$t('route.' + title)

    return translatedTitle
  }
  return title
}

2. 在router路由文件夹的js配置文件内，对应菜单的title位置写入国际化对应的key

{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    only: 'im-dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'dashboard', icon: 'dashboard' }
    }]
  },

3 . 在使用标题的title引入 i18n.js 文件，进行使用

// 1. 引入 i18n.js 
import { generateTitle } from '@/utils/i18n'

// 2. generateTitle 函数被添加到了 methods 中，这意味着你可以在组件的方法中调用它来生成页面的标题。这种方式使你能够在组件中动态设置页面的标题，根据不同的情况返回不同的标题文本，或者在多语言应用中返回翻译后的标题。
methods: {
    generateTitle,
}

// 3. 在 template中进行使用

        {{ generateTitle(item.meta.title) }}
        {{ generateTitle(item.meta.title) }}
      

4. 在使用路由的组件，进行使用

// 示例

    

    
      
      
    
  
// 引入i18n.js 文件
import { generateTitle } from '@/utils/i18n'
// generateTitle 函数被添加到了 methods 中，这意味着你可以在组件的方法中调用它来生成页面的菜单。这种方式使你能够在组件中动态设置菜单的名称，根据不同的情况返回不同的菜单名称，或者在多语言应用中返回翻译后的菜单名称。
methods: {
generateTitle,
}

5. el-table中使用

// 使用

1. 



// 2.

// data中定义 table.topicContent
data () {
    return {
        table: {
            topicContent: this.$t('topic.topicContent')
        },
    }
}