이 글은 '신입사원 생성식' 활동에 참여하여 함께 너겟 생성의 길을 시작했습니다.
1. 국제화 소개
일부 다국적 프로젝트의 경우 국제화가 특히 중요하므로 국제화가 무엇입니까?국제화는 우리가 작성하는 프로젝트를 다른 국가의 언어에 따라 번역 및 전환 할 수 있다는 것을 의미하므로 다른 국가의 고객에게 편리합니다.
기본 아이디어는 다음과 같습니다
① 언어팩 정의 : 표시할 여러 언어가 필요한 경우 여러 언어팩을 정의
② 개체 생성, 언어팩 통합, 개체의 키는 언어팩의 참조, 값은 언어팩 개체
③ vue-i18n 클래스의 객체를 생성함과 동시에 그 메시지 속성은 ②단계에서 생성된 객체이고 locale 속성은 ②단계의 언어 객체에 해당하는 키를 할당받는다.
④ Vue 인스턴스 객체 생성 시 vue-i18n 클래스의 객체를 마운트
다음은 자세한 설명입니다
2. 사용이 간편하다
1. vue-i18n 플러그인 설치
i18n이 internationalization단어의 줄임말로 첫글자 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'
}
复制代码두 항목의 키는 동일하며 나중에 구성 요소에서 사용됩니다.
3. 개체 결합
// 3、组合语言包对象
const messages = {
zh,
en
}
复制代码4. i18n 인스턴스 생성
// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
messages,
locale: 'en'
})
复制代码- 메시지 속성은 3단계에서 복구 조합으로 설정해야 합니다.
- locale: 값은 메시지 객체의 키 값이며, 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>
复制代码이때 locale 값을 zh로 바꾸면
// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
messages,
locale: 'zh'
})
复制代码실제 개발에서는 여러 구성 요소에 여러 테이블, 탐색 메뉴 등이 있을 수 있으며 각 테이블의 헤더 및 메뉴 설명 정보가 다를 수 있습니다.
그것을 처리하는 방법?
以表格的表头为例
我们可以在语言包对象中，定义多个 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、如何调整语言设置
在浏览器的语言设置中，可以调整语言，然后刷新页面，浏览器就会采用最新的语言设置