vue项目 i18n 国际化完整教程_vuei18n

国际化介绍

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

基本思路如下

1. 安装语言包

2. 定义语言包

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

下面具体讲解

使用

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

1. 安装插件 vue- i18n

这里建议安装 7.3.2 版本

npm install vue-i18n@7.3.2

在 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文件夹

<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
      <!-- <svg-icon class-name="international-icon" icon-class="language" /> -->
      <p>切换语言</p> <!-- 在下拉菜单按钮上显示的文本，点击以切换语言 -->
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language==='zh'" command="zh">
        中文 <!-- 中文语言选项 -->
      </el-dropdown-item>
      <el-dropdown-item :disabled="language==='en'" command="en">
        English <!-- 英语语言选项 -->
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
 
<script>
export default {
  computed: {
    language() {
      return this.$store.getters.language // 获取当前应用的语言设置
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang // 切换应用的语言
      this.$store.dispatch('app/setLanguage', lang) // 通过 Vuex 存储更新应用的语言
      this.$message({
        message: '切换语言成功', // 显示语言切换成功的消息
        type: 'success'
      })
    }
  }
}
</script>

•  在页面中使用组件

// 1. 引入LangSelect组件
import LangSelect from '@/components/LangSelect'
// 2. 注册组件
export default {
  components: {
    LangSelect
  }
}
 
// 3. 使用
<template>
    <div>
        <p icon="organization">{{ $t('login.title') }}</p>
    </div>
</template>

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中进行使用
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ generateTitle(item.meta.title) }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
      </el-breadcrumb-item>

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

// 示例
<div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children,item) &&                 (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-    title-noDropdown':!isNest}">
          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" /> //在 :title使用generateTitle
        </el-menu-item>
      </app-link>
    </template>
 
    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template slot="title">
        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="generateTitle(item.meta.title)" /> //在 :title使用generateTitle
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-submenu>
  </div>
// 引入i18n.js 文件
import { generateTitle } from '@/utils/i18n'
// generateTitle 函数被添加到了 methods 中，这意味着你可以在组件的方法中调用它来生成页面的菜单。这种方式使你能够在组件中动态设置菜单的名称，根据不同的情况返回不同的菜单名称，或者在多语言应用中返回翻译后的菜单名称。
methods: {
generateTitle,
}
 

5. el-table中使用

// 使用
 
1. 
<el-table-column
    prop="real_name"
    :label="$t('topic.topicContent')"
    width="80"
/>
 
 
// 2.
<el-table-column prop="topicContent" :label="table.topicContent" width="130" />
// data中定义 table.topicContent
data () {
    return {
        table: {
            topicContent: this.$t('topic.topicContent')
        },
    }
}