Este artículo ha participado en la actividad "Ceremonia de creación de recién llegados", y hemos iniciado juntos el camino de la creación de Nuggets.
1. Introducción a la internacionalización
Para algunos proyectos multinacionales, la internacionalización es particularmente importante, entonces, ¿qué es la internacionalización?La internacionalización significa que los proyectos que escribimos se pueden traducir y cambiar de acuerdo con los idiomas de diferentes países, lo cual es conveniente para los clientes en diferentes países.
La idea básica es la siguiente
① Definir paquetes de idiomas: si necesita varios idiomas para mostrar, defina varios paquetes de idiomas
② Cree un objeto, integre el paquete de idioma, la clave del objeto es la referencia del paquete de idioma y el valor es el objeto del paquete de idioma
③ Cree un objeto de la clase vue-i18n, y al mismo tiempo su atributo de mensajes es el objeto creado en el paso ②, y su atributo de configuración regional se le asigna la clave correspondiente al objeto de idioma en el paso ②
④ Al crear un objeto de instancia de Vue, monte el objeto de la clase vue-i18n
La siguiente es una explicación detallada
2. Fácil de usar
1. Instale el complemento vue-i18n
i18nEs internationalizationla abreviatura de esta palabra. Toma la primera letra iy nla última letra. Hay 18 letras en el medio, por lo que se escribe i18nen combinación. Este es un complemento para la internacionalización de Vue. Puede integrar fácilmente algunas funciones de localización. Integrar en su aplicación Vue.js
npm i vue-i18n
复制代码Importar en main.js y usar como complemento
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
复制代码2. Cree un objeto de paquete de idioma
// 1、创建中文语言包对象
const zh = {
username: '用户名',
email: '邮箱',
mobile: '手机'
}
// 2、创建英文语言包对象
const en = {
username: 'Username',
email: 'Email',
mobile: 'Mobile'
}
复制代码Las claves de los dos elementos son las mismas y se utilizarán más adelante en el componente.
3. Combinar objetos
// 3、组合语言包对象
const messages = {
zh,
en
}
复制代码4. Crear instancia i18n
// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
messages,
locale: 'en'
})
复制代码- La propiedad de mensajes debe establecerse en la combinación de reparación en el paso 3
- configuración regional: el valor es el valor de una clave en el objeto de mensajes. Si se establece en en, el componente utiliza el valor del atributo correspondiente en el paquete de idioma inglés creado en el paso 1. Si se establece en zh, el chino se utiliza el idioma Las propiedades en el paquete son solo
5. Montar objetos
// 5、挂载 i18n
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
复制代码6. Código completo
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. Uso en componentes
<template>
<div id="app">
<p>{{ $t('username') }}</p>
<p>{{ $t('email') }}</p>
<p>{{ $t('mobile') }}</p>
</div>
</template>
复制代码3. Objeto de paquete de idioma extendido
En un proyecto real, la internacionalización puede ser necesaria en muchos lugares, como encabezados de tablas, barras de pestañas, menús de navegación, etc. Podemos crear múltiples claves en el paquete de idioma para almacenar los idiomas de estos módulos respectivamente.
// 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'
}
}
复制代码componentes utilizados
<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>
复制代码En este punto, si cambia el valor de configuración regional a zh
// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
messages,
locale: 'zh'
})
复制代码En el desarrollo real, puede haber varias tablas, menús de navegación, etc. en varios componentes, y la información de descripción del encabezado y del menú de cada tabla puede ser diferente.
¿Cómo lidiar con ello?
以表格的表头为例
我们可以在语言包对象中，定义多个 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、如何调整语言设置
在浏览器的语言设置中，可以调整语言，然后刷新页面，浏览器就会采用最新的语言设置