基于VUE的国际化
什么是国际化，国际化就是设计和制造容易适应不同区域要求的产品一种方式，从产品中抽离所有地域语言、国家地区和文化相关的元素。换句话说，应用程序的功能和代码设计要考虑不同区域运行的需要。
在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 的值进行修改即可。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-07-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读