率先是是在main.js文件中把国际化引进进来

前言

银河国际平台官方网站 1银河国际平台官方网站 2

些微项目我们必要接济多样语言切换,知足国际化要求。
vue-i18n是一个vue插件,主要成效就是让项目帮衬国际化多语言,使用方便快速,能很自在的将咱们的种类国际化。本文首要介绍使用vue-i18n完成切换中国和俄罗丝文效果。

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import VueI18n from 'vue-i18n'
 5 
 6 Vue.use(VueI18n)
 7 Vue.config.productionTip = false
 8 const i18n = new VueI18n({
 9   locale: 'zh-CN',
10   messages: {
11     'zh-CN': {
12       'detail1': '详情1',
13       'detail2': '详情2',
14       'detail3': '详情3',
15       'year': '年'
16     },
17     'en-US': {
18       'detail1': 'Detail1',
19       'detail2': 'Detail2',
20       'detail3': 'Detail3',
21       'year': 'year'
22     }
23   }
24 })
25 
26 new Vue({
27   el: '#app',
28   i18n: i18n,
29   router,
30   components: { App },
31   template: '<App/>'
32 })

安装vue-i18n

main.js

大家接收npm安装vue-i18n。

里面小编今后先在此个文件之中山大学概布署部分国际化的数据,放到常量i18n中,个中locale就是用来结构当前系统的言语的。最近这里运用的国语的,假使页面能够支撑两种语言切换的话,那件事件触发后便是改这里的安顿的值,若改成韩语,那设置为“en-US”

npm install vue vue-i18n --save

接下去便是在页面中动用的难题了。

引入vue-i18n

率先种采纳方式:在视图模板中央行政机关接使用,选取{{$t(‘xxxx’卡塔尔}}的措施。如下作者未来选用’detail1’那一个的国际化:

首先在 main.js 中引入 vue-i18n。

银河国际平台官方网站 3

import Vue from 'vue'import App from './App'import VueI18n from 'vue-i18n' Vue.use // 通过插件的形式挂载

页面展现的机能正是:

任何时候创造带有选项的 VueI18n 实例。

华语效果:

const i18n = new VueI18n({ locale: localStorage.getItem || 'zh-CN', //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh-CN': require, // 中文语言包 'en-US': require // 英文语言包 }})

银河国际平台官方网站 4

只顾实例中加载了中Lithuania语八个语言包。分别希图七个语言包,
使用require引进到main.js中:

 

中文语言包:zh.js

斯洛伐克语效果:

export const m = { welcome: '欢迎来到北京', today: '今天是', week: { sun: '星期日', mon: '星期一', tues: '星期二', wed: '星期三', thur: '星期四', fri: '星期五', sat: '星期六' }}

银河国际平台官方网站 5

Slovak语语言包: en.js

 第三种接纳方法,是在剧本里面使用,那个时候能够接收this.$t(‘xxxx’卡塔尔国的形式。如下

export const m = { welcome: 'Welcome to Beijing.', today: 'Today is ', week: { sun: 'Sunday', mon: 'Monday', tues: 'Tuesday', wed: 'Wednesday', thur: 'Thursday', fri: 'Friday', sat: 'Saturday' }}

银河国际平台官方网站 6银河国际平台官方网站 7

接下来把 i18n 挂载到 vue 根实例上:

 1 <template>
 2   <div>
 3       <h1>{{$t('detail1')}}</h1>
 4       <el-button @click="print">打印</el-button>
 5   </div>
 6 </template>
 7 <script>
 8   export default{
 9    methods:{
10        print(){
11            console.log(this.$t('detail1'))
12        }
13    },
14   }
15 </script>
16 
17 <style>
18 
19 </style>
new Vue({ el: '#app', i18n, components: { App }, template: ''})

test.vue

使用vue-i18n

因为第两种方法中的this,指的是vue实例,所以这种措施在.vue结尾的的文本中能够生效。不过风度翩翩旦是比方说在大家定义常量的公文之中要选取的话,就不算了。那我们在常量中定义的数额,到页面显示,要如何本事也运用上这几个国际化吗。这些我们就来看下第两种方法。

切换语言 {{$t}} {{$t}}{{weekname}}

其三种接受办法,在平凡js文件中中安顿,在页面上也显示国际化。

专一用法,在组件的沙盘模拟经营template中,调用$t(卡塔尔(英语:State of Qatar) 方法,{{$t}}
表示使用welcome的语言。假若是在组件的script中,调用this.$i18n.t(卡塔尔(قطر‎方法拿到语言,下文仲讲到。

率先大家前不久main.js文件中的国际化里面增添月份的国际化布局:

作者们想经过点击“切换语言”开关,来对模板中的文字内容张开对应的语言切换。

银河国际平台官方网站 8银河国际平台官方网站 9

那我们就在章程changeLang(卡塔尔(قطر‎ 中那样写:

 1 const i18n = new VueI18n({
 2   locale: 'zh-CN',
 3   messages: {
 4     'zh-CN': {
 5       'detail1': '详情1',
 6       'detail2': '详情2',
 7       'detail3': '详情3',
 8       'year': '年',
 9       'month1': '1月',
10       'month2': '2月',
11       'month3': '3月'
12     },
13     'en-US': {
14       'detail1': 'Detail1',
15       'detail2': 'Detail2',
16       'detail3': 'Detail3',
17       'year': 'year',
18       'month1': 'January',
19       'month2': 'February',
20       'month3': 'March'
21     }
22   }
23 })
changeLang() { this.lang = localStorage.getItem || 'zh-CN'; if ( this.lang === 'zh-CN' ) { this.lang = 'en-US'; this.$i18n.locale = this.lang; } else { this.lang = 'zh-CN'; this.$i18n.locale = this.lang; } localStorage.setItem; let week = this.getWeek(); this.weekname = week; },

main.js

咱俩先在本地存储中赢得locale 的值,假诺空头支票则默以为zh-CN
。然后在认清当前语言是华语照旧斯洛伐克语,假诺是华语则切换到罗马尼亚语,反之亦然。通过this.$i18n.locale
完成语言的切换。

下一场我们打算二个constant.js文件。在里边如下配置:

大家期待浏览器保存每一趟切换后的言语,客户刷新页面包车型地铁时候会自动识别语言。由此大家运用
localStorage 本地存款和储蓄来保存每一回设置后的言语,当然你也能够运用coockie
达成。

银河国际平台官方网站 10银河国际平台官方网站 11

一时候我们要在js部分管理多语言,譬喻以下getWeek(卡塔尔(قطر‎部分完毕了这两天是星期几的代码,仅供仿照效法。

export const months = ['month1', 'month2', 'month3'].map((item, index) => { return {'label': item, 'value': index + 1} })
getWeek() { let week = new Date; let day = 'm.week.sun'; switch  { case 0: day = 'm.week.sun'; break; case 1: day = 'm.week.mon'; break; case 2: day = 'm.week.tues'; break; case 3: day = 'm.week.wed'; break; case 4: day = 'm.week.thur'; break; case 5: day = 'm.week.fri'; break; case 6: day = 'm.week.sat'; break; } return this.$i18n.t; }

constants.js

如上便是应用vue-i18n完成中英语语言切换效果的事无巨细内容。有关vue-i18n的更加多用法可以参见项目地址:

此间注意的是,笔者这边的月度,直接使用的正是我们国际化里面配备的月度的key值。接下来大家就来页面上运用了。

总结

此处把月份放到下拉框里面显示为例:

上述正是这篇小说的全体内容了,希望本文的内容对我们的学习或然办事富有一定的参谋学习价值,多谢大家对剧本之家的援助。

银河国际平台官方网站 12银河国际平台官方网站 13

 1 <template>
 2   <div>
 3       <h1>{{$t('detail1')}}</h1>
 4       <el-button @click="print">打印</el-button>
 5      <el-select v-model="month" placeholder="请选择月份">
 6         <el-option v-for="item in months" :key="item.value" :label="$t(item.label)" :value="item.value">
 7         </el-option>
 8       </el-select>
 9   </div>
10 </template>
11 <script>
12 import {months} from '@/util/constants'
13   export default{
14     data(){
15         return{
16             month:'',
17             months:[]
18         }
19       },
20     methods:{
21        print(){
22            console.log(this.$t('detail1'))
23        }
24    },
25    created(){
26        this.months = months
27    }
28   }
29 </script>
30 
31 <style>
32 
33 </style>

test.vue

那边注意的有个别就是,在视图模型中,下拉框的label选取  :label=”$t(item.label卡塔尔(قطر‎”的方法,进而来到达国际体现的法子。

中文页面效果如下:

银河国际平台官方网站 14

Ukraine语页面效果如下:

银河国际平台官方网站 15

 

到此,二种艺术介绍完结。因为在开垦中相见这么的难点,故顺便总计下共享出来。借使我们有其余相符的标题或措施能够留言共享^_^。