Vue i18n international nanny level tutorial _ I can't understand the reason

This article has participated in the "Newcomer Creation Ceremony" activity, and started the road of Nuggets creation together

​

 1. Introduction to internationalization

For some multinational projects, internationalization is particularly important, so what is internationalization? Internationalization means that the projects we write can be translated and switched according to the languages ​​of different countries, which is convenient for customers in different countries. use

The basic idea is as follows

① Define language packs: If you need several languages ​​to display, define several language packs

② Create an object, integrate the language pack, the key of the object is the reference of the language pack, and the value is the language pack object

③ Create an object of the vue-i18n class, and at the same time its messages attribute is the object created in step ②, and its locale attribute is assigned the key corresponding to the language object in step ②

④ When creating a Vue instance object, mount the object of the vue-i18n class

The following is a detailed explanation

2. Simple to use

1. Install the plugin vue-i18n

i18nIt is internationalizationthe abbreviation of this word. It takes the first letter iand nthe last letter. There are 18 letters in the middle, so it is written i18nin combination. This is a plugin for Vue internationalization. It can easily integrate some localization functions. Integrate into your Vue.js application

npm i vue-i18n
复制代码

Import in main.js and use as plugin

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

2. Create a language pack object

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

The keys in the two items are the same and will be used later in the component

3. Combining objects

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

4. Create i18n instance

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

• The messages property should be set to the combination of repairing in step 3
• locale: The value is the value of a key in the messages object. If it is set to en, the component uses the value of the corresponding attribute in the English language package created in step 1. If it is set to zh, the Chinese language is used. The properties in the package are only

5. Mount objects

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

6. Complete code

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. Use in components

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

3. Extended language pack object

In real projects, internationalization may be required in many places, such as table headers, tab bars, navigation menus, etc. We can create multiple keys in the language pack to store the languages ​​of these modules respectively.

// 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'
  }
}
复制代码

components used

<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>
复制代码

At this point, if you switch the value of locale to zh

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

In actual development, there may be multiple tables, navigation menus, etc. in multiple components, and the header and menu description information of each table may be different.

How to deal with it?

以表格的表头为例

我们可以在语言包对象中，定义多个 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 的实例即可![]

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
    },
  },
复制代码

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

6、动态菜单如何处理

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

返回的菜单名称字段（authName）的值都是中文，此时该如何处理呢？

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

zh.js

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

en.js

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

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

在 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
},
复制代码

7、如何调整语言设置

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