什么是国际化,国际化就是设计和制造容易适应不同区域要求的产品一种方式,从产品中抽离所有地域语言、国家地区和文化相关的元素。换句话说,应用程序的功能和代码设计要考虑不同区域运行的需要。
在VUE中,我们可以使用官方推荐的国际化组件:http://kazupon.github.io/vue-i18n/.
先说一下其实现原理,首先是应该声明语言包,你可以理解为时一个对象,里面有共同的key,value值就是不同的语言不同的值,页面中只需插入相应的变量即可,切换语言的时候只是更换语言包就能达到整站国际化。
下面来说一下具体的实现方法。首先是先通过vue-cli初始化项目
vue init webpack i18ntest
然后进行i18n的安装
cnpm install vue-i18n -D
为了方便后期的项目维护,我们将i18n的配置及语言包单独提出来。在src目录下新建一个locale文件夹,然后再此文件夹内在建一个langs文件夹,用来存在我们的语言包。
我们新建两个语言包,一个是en.js,一个是zh.js
en.js
export default {
ya: "hello",
website: "luofanting"
}
zh.js
export default {
ya: "你好",
website: "落帆亭"
}
然后再locale文件夹内新建index.js来开始配置i18n
import Vue from 'vue'
import VueI18n from 'vue-i18n';
import en from "./langs/en";
import zh from "./langs/zh";
Vue.use(VueI18n);
const messages = {
en: {
...en
},
zh: {
...zh
}
};
const i18n = new VueI18n({
locale: "zh",//配置默认的语言
messages,//将上面声明的messages信息导入
fallbackLocale: "en"//如果所选择的的语言包内没有该字段,默认使用的语言包
});
export default i18n
如此就轻松的配置完成,接下来看一下如何在组件当中使用
首先是main.js
import Vue from 'vue'
import App from './App'
import i18n from './locale'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: {App},
template: '<App/>',
i18n
})
i18n.locale = "zh"
在mian当中导入即可,然后是我们修改初始化好的示例代码:app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ $t("website") }}</h1>
<button @click="change">change languages</button>
<hr>
</div>
</template>
<script>
import i18n from "@/locale";
export default {
name: 'App',
data: function () {
return {
value1: ""
}
},
components: {},
methods: {
change(){
i18n.locale = i18n.locale == "en"? "zh" : "en";
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
在使用的过程中需要$t('')的方式来进行写入,在切换语言包的时候,只需要将i18n.locale 的值进行修改即可。