Vuei18n国際乳母レベルチュートリアル_理由がわかりません

この記事は「新人クリエーションセレモニー」活動に参加し、一緒にナゲットクリエーションの道を歩み始めました

 1.国際化の概要

一部の多国籍プロジェクトでは、国際化が特に重要です。国際化とは何ですか?国際化とは、私たちが作成するプロジェクトをさまざまな国の言語に応じて翻訳および切り替えることができることを意味します。これは、さまざまな国の顧客にとって便利です。

基本的な考え方は次のとおりです。

①言語パックを定義する:表示するために複数の言語が必要な場合は、いくつかの言語パックを定義します

②オブジェクトを作成し、言語パックを統合します。オブジェクトのキーは言語パックの参照であり、値は言語パックオブジェクトです。

③vue-i18nクラスのオブジェクトを作成すると同時に、そのメッセージ属性は手順②で作成したオブジェクトであり、そのロケール属性には手順②で言語オブジェクトに対応するキーが割り当てられます。

④Vueインスタンスオブジェクトを作成する場合は、vue-i18nクラスのオブジェクトをマウントしてください。

以下は詳細な説明です

2.使いやすい

1.プラグインvue-i18nをインストールします

i18ninternationalizationこの単語の略です。最初の文字と最後の文字を取りますi中央nに18文字あるのでi18n、組み合わせて記述します。これは、Vueの国際化のためのプラグインです。一部のローカリゼーション機能を簡単に統合できます。統合するVue.jsアプリケーションに

npm i vue-i18n
复制代码

main.jsにインポートし、プラグインとして使用します

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
复制代码

2.言語パックオブジェクトを作成します

// 1、创建中文语言包对象
const zh = {
  username: '用户名',
  email: '邮箱',
  mobile: '手机'
}
// 2、创建英文语言包对象
const en = {
  username: 'Username',
  email: 'Email',
  mobile: 'Mobile'
}
复制代码

2つのアイテムのキーは同じであり、コンポーネントの後半で使用されます

3.オブジェクトを組み合わせる

// 3、组合语言包对象
const messages = {
  zh,
  en
}
复制代码

4.i18nインスタンスを作成します

// 4、创建 VueI18n 实例,并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
  messages,
  locale: 'en'
})
复制代码
  • messagesプロパティは、手順3で修復の組み合わせに設定する必要があります
  • locale:valueは、メッセージオブジェクトのキーの値です。enに設定されている場合、コンポーネントは、手順1で作成した英語パッケージの対応する属性の値を使用します。zhに設定されている場合、中国語言語が使用されます。パッケージ内のプロパティは

5.オブジェクトをマウントします

// 5、挂载 i18n
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')
复制代码

6.完全なコード

import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
​
// 1、创建中文语言包对象
const zh = {
  username: '用户名',
  email: '邮箱',
  mobile: '手机'
}
// 2、创建英文语言包对象
const en = {
  username: 'Username',
  email: 'Email',
  mobile: 'Mobile'
}
// 3、组合语言包对象
const messages = {
  zh,
  en
}
​
// 4、创建 VueI18n 实例,并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
  messages,
  locale: 'en'
})
​
Vue.config.productionTip = false
// 5、挂载 i18n
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')
​
复制代码

7.コンポーネントでの使用

<template>
  <div id="app">
    <p>{{ $t('username') }}</p>
    <p>{{ $t('email') }}</p>
    <p>{{ $t('mobile') }}</p>
  </div>
</template>
复制代码

3.拡張言語パックオブジェクト

実際のプロジェクトでは、テーブルヘッダー、タブバー、ナビゲーションメニューなど、多くの場所で国際化が必要になる場合があります。言語パックに複数のキーを作成して、これらのモジュールの言語をそれぞれ保存できます。

// 1、创建中文语言包对象
const zh = {
  table: {
    username: '用户名',
    email: '邮箱',
    mobile: '手机'
  },
  menus: {
    home: '首页',
    download: '下载'
  },
  tabs: {
    info: '商品描述',
    comment: '评价'
  }
}
// 2、创建英文语言包对象
const en = {
  table: {
    username: 'Username',
    email: 'Email',
    mobile: 'Mobile'
  },
  menus: {
    home: 'Home',
    download: 'DownLoad'
  },
  tabs: {
    info: 'Describe',
    comment: 'Comment On'
  }
}
复制代码

使用されるコンポーネント

<template>
  <div id="app">
    <!-- 模拟表格中使用 -->
    <div>
      <p>{{ $t('table.username') }}</p>
      <p>{{ $t('table.email') }}</p>
      <p>{{ $t('table.mobile') }}</p>
    </div>
    <!-- 模拟导航菜单中使用 -->
    <div>
      <p>{{ $t('menus.home') }}</p>
      <p>{{ $t('menus.download') }}</p>
    </div>
    <!-- 模拟tabs 选项卡中使用 -->
    <div>
      <p>{{ $t('tabs.info') }}</p>
      <p>{{ $t('tabs.comment') }}</p>
    </div>
  </div>
</template>
复制代码

20220301193736.png

この時点で、localeの値をzhに切り替えると

// 4、创建 VueI18n 实例,并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
  messages,
  locale: 'zh'
})
复制代码

d36b25d7790947f8d2c0a057b077230a.png

実際の開発では、複数のコンポーネントに複数のテーブルやナビゲーションメニューなどがあり、各テーブルのヘッダーやメニューの説明情報が異なる場合があります。

どのように対処しますか?

以表格的表头为例

我们可以在语言包对象中,定义多个 table,如 userTable、roleTable等,每个当中存储自己的字段和对应的语言,也可以在一个 table 对象中,定义多个字段,把所有表格用到的表头信息全都定义在一个 table 对象中

4、单独的语言包文件

语言包对象 最后可能会比较大,属性比较多,所以最好的办法是将其定义成单独的 js 文件,然后再进行整合

1、创建语言包文件

src 目录下新建 langurage 目录,在其中新建 zh.js 和 en.js 文件,然后将上面的语言包代码拷贝进来,因为一会要使用语言包对象,所以要导出

zh.js

// 1、创建中文语言包对象
export default{
    table: {
      username: '用户名',
      email: '邮箱',
      mobile: '手机'
    },
    menus: {
      home: '首页',
      download: '下载'
    },
    tabs: {
      info: '商品描述',
      comment: '评价'
    }
  }
复制代码

en.js

// 2、创建英文语言包对象
export default {
    table: {
        username: 'Username',
        email: 'Email',
        mobile: 'Mobile'
    },
    menus: {
        home: 'Home',
        download: 'DownLoad'
    },
    tabs: {
        info: 'Describe',
        comment: 'Comment On'
    }
}
复制代码

2、整合语言包文件

我们将整合语言包对象和创建 VueI18n 实例并配置的过程写到一个 js 文件中,然后在 main.js 中导入

这样 main.js 中代码就会简练很多,毕竟 main.js 中只是最后需要一个 VueI18n 的实例即可![]

9aeab4def6e3e91245aceb0b083630bb.png

langurage 目录中新建 index.js,代码如下

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh'
import en from './en'
​
Vue.use(VueI18n)
​
const messages = {
  zh,
  en
}
const i18n = new VueI18n({
  messages,
  locale: 'en'
})
export default i18n
​
复制代码

3、main.js 中引入

import Vue from 'vue'
import App from './App.vue'
import i18n from './langurage'
​
Vue.config.productionTip = false
// 5、挂载 i18n
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')
​
复制代码

5、切换语言

当前切换语言,需要修改如下代码中的 locale 的值

const i18n = new VueI18n({
  messages,
  locale: 'en'
})
复制代码

手动切换当然不行了,页面中可以提供一个按钮,点击时,动态改变这里的值

通过 navigator.language 方法可以获取浏览器当前使用的语言,基本就代表了用户所使用的语言

// 获取浏览器当前使用的语言,并进行处理
const i18n = new VueI18n({
  messages,
  locale: navigator.language // 获取浏览器的语言
})
复制代码

组件中加入语言切换按钮

    <button @click="translate('zh')">切换为中文</button>
    <button @click="translate('en')">切换为英文</button>
复制代码
  methods: {
    translate(lang) {
      this.$i18n.locale = lang
    },
  },
复制代码

这样,我们就实现了语言的切换了

0ffb6884a1d04474d9ec639a55da9548.gif

6、动态菜单如何处理

如下面的导航菜单是请求后台数据,然后借用 element-ui 中的 menu 组件动态渲染的

c6f9890654f8391eb871e586281ca9bb.png

返回的菜单名称字段(authName)的值都是中文,此时该如何处理呢?

很简单,语言包中定义相关数据

zh.js

export default {
  menus: {
    用户管理: '用户管理',
    用户列表: '用户列表',
    角色列表: '角色列表',
    权限管理: '权限管理',
    权限列表: '权限列表'
  }
}
复制代码

en.js

export default {
  menus: {
    用户管理: 'User Manager',
    用户列表: 'User List',
    角色列表: 'Role List',
    权限管理: 'Rights Manager',
    权限列表: 'Rights List'
  }
}
复制代码

menu 组件渲染时,加入如下代码

a75a831bcfd4eda17972428447f25923.png

在 methods 中定义方法 menusTitle

  menusTitle(item) {
      if (this.$te('menus.' + item)) {
        return this.$t('menus.' + item)
      }
      return item
    },
复制代码

现在我们实现翻译功能

头部加上一个 switch 进行语言切换

<el-switch
    v-model="langValue"
    :active-text="active_text"
    :inactive-text="inactive_text"
    @change="translate"
>
复制代码

data 中的数据

 langValue: false,
 lang: '',
 active_text: '',
 inactive_text: '',
复制代码

组件初始化时对上面的值进行初始化设置

methods 中定义此方法,并在 created 钩子函数中调用

 setSwitch() {
     this.active_text = navigator.language === 'zh' ? '英文' : '中文'
     this.inactive_text = navigator.language === 'zh' ? '中文' : '英文'
     this.lang = navigator.language
 },
复制代码

switch 的 change 事件处理程序

translate() {
    this.lang = this.lang === 'zh' ? 'en' : 'zh'
    this.$i18n.locale = this.lang
},
复制代码

4911ce14e86617aa76d1285d7e89a120.gif

7、如何调整语言设置

在浏览器的语言设置中,可以调整语言,然后刷新页面,浏览器就会采用最新的语言设置

24a7ecb24a8b9e74aa7d6b7d9ea6efc3.png

おすすめ

転載: juejin.im/post/7082730122809180174