Cet article a participé à l'activité "Newcomer Creation Ceremony" et a commencé ensemble la route de la création de Nuggets
1. Introduction à l'internationalisation
Pour certains projets multinationaux, l'internationalisation est particulièrement importante, alors qu'est-ce que l'internationalisation ? L'internationalisation signifie que les projets que nous écrivons peuvent être traduits et commutés en fonction des langues de différents pays, ce qui est pratique pour les clients de différents pays.
L'idée basique est la suivante
① Définir les packs de langue : Si vous avez besoin de plusieurs langues à afficher, définissez plusieurs packs de langue
② Créez un objet, intégrez le pack de langue, la clé de l'objet est la référence du pack de langue et la valeur est l'objet du pack de langue
③ Créez un objet de la classe vue-i18n, et en même temps son attribut messages est l'objet créé à l'étape ②, et son attribut locale reçoit la clé correspondant à l'objet langage à l'étape ②
④ Lors de la création d'un objet d'instance de Vue, montez l'objet de la classe vue-i18n
Ce qui suit est une explication détaillée
2. Simple à utiliser
1. Installez le plugin vue-i18n
i18nC'est internationalizationl'abréviation de ce mot. Il prend la première lettre iet nla dernière lettre. Il y a 18 lettres au milieu, donc il est écrit i18nen combinaison. Ceci est un plugin pour l'internationalisation de Vue. Il peut facilement intégrer certaines fonctions de localisation. Intégrer dans votre application Vue.js
npm i vue-i18n
复制代码Importer dans main.js et utiliser comme plugin
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
复制代码2. Créer un objet pack de langue
// 1、创建中文语言包对象
const zh = {
username: '用户名',
email: '邮箱',
mobile: '手机'
}
// 2、创建英文语言包对象
const en = {
username: 'Username',
email: 'Email',
mobile: 'Mobile'
}
复制代码Les clés des deux éléments sont les mêmes et seront utilisées plus tard dans le composant
3. Combiner des objets
// 3、组合语言包对象
const messages = {
zh,
en
}
复制代码4. Créer une instance i18n
// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
messages,
locale: 'en'
})
复制代码- La propriété messages doit être définie sur la combinaison de réparation à l'étape 3
- locale : la valeur est la valeur d'une clé dans l'objet messages. S'il est défini sur en, le composant utilise la valeur de l'attribut correspondant dans le package de langue anglaise créé à l'étape 1. S'il est défini sur zh, le chinois langue est utilisée. Les propriétés du package sont uniquement
5. Monter des objets
// 5、挂载 i18n
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
复制代码6. Code complet
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. Utilisation dans les composants
<template>
<div id="app">
<p>{{ $t('username') }}</p>
<p>{{ $t('email') }}</p>
<p>{{ $t('mobile') }}</p>
</div>
</template>
复制代码3. Objet pack de langue étendu
Dans un projet réel, l'internationalisation peut être requise à de nombreux endroits, tels que les en-têtes de tableau, les barres d'onglets, les menus de navigation, etc. Nous pouvons créer plusieurs clés dans le pack de langue pour stocker respectivement les langues de ces modules.
// 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'
}
}
复制代码composants utilisés
<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>
复制代码À ce stade, si vous changez la valeur de locale en zh
// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
messages,
locale: 'zh'
})
复制代码Dans le développement réel, il peut y avoir plusieurs tables, menus de navigation, etc. dans plusieurs composants, et les informations d'en-tête et de description de menu de chaque table peuvent être différentes.
Comment y faire face?
以表格的表头为例
我们可以在语言包对象中，定义多个 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、如何调整语言设置
在浏览器的语言设置中，可以调整语言，然后刷新页面，浏览器就会采用最新的语言设置