vue中如何使用i18n实现国际化
一、前言
项目中需要实现多语言切换，这时候接触到国际化，前端框架无数，其中几种热门的框架都有相匹配的国际化插件工具。例如：
vue + vue-i18n
angular + angular-translate
react + react-intl
jquery + jquery.i18n.property
二、Vue项目实现国际化
这里来对vue使用vue-i18n这个插件进行国际化功能的实现
1、首先在自己的项目中安装 vue-i18n依赖包。
npm install vue-i18n --S
2、创建语言包、i18n实例对象，并在main.js中引入：
|-- main.js 导入文件
|-- i18n
|-- index.js 创建实例对象
|-- languages 各种语言包
|-- en-us.js 英文包
|-- zh-cn.js 中文包
i18n/index.js，创建i18n实例对象，代码如下：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 注册i18n实例并引入语言文件
const i18n = new VueI18n({
locale: 'zh',
messages: {
'zh': require('./languages/zh_cn'),
'en': require('./languages/en_us')
}
})
export default i18n
-
接下来我们就需要新建两个js文件（或者josn文件）作为语言包。
其中zh.js中文包中代码为i18n/languages/zh：
module.exports = {
message: {
login: '欢迎登录',
lang:{
zh: '中文',
en: '英文'
}
}
}
其中en.js英文包中代码为i18n/languages/en：
module.exports = {
message: {
login: 'Welcome To Login',
lang: {
zh: 'Chinese',
en: 'English'
}
}
}
- 将i18n实例对象挂载到Vue实例之上：
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/assets/plugins/element-ui";
import i18n from '@/assets/plugins/i18n';
new Vue({
i18n, // 挂载到Vue实例之上
router,
store,
render: (h) => h(App),
}).$mount("#app");
- 实现中英文切换按钮，代码如下：
<template>
<div>
<div class="lang">
<el-radio-group v-model="language" size="mini">
<el-radio label="zh" border>{{ $t("message.lang.zh") }}</el-radio>
<el-radio label="en" border>{{ $t("message.lang.en") }}</el-radio>
</el-radio-group>
</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {
language: "zh",
};
},
watch: {
//侦听单选按钮的变化，从而进行切换语言
language: function(val) {
val === "zh" ? (this.$i18n.locale = "zh") : (this.$i18n.locale = "en");
},
},
};
</script>
#补充vue-i18n 数据渲染的模板语法
模板语法暂时分为三种：
//vue组件模板的使用
<div>{{$t('message.zh')}}</div>
//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>
//vue组件data中赋值的使用
data:{
msg:this.$t('message.zh');
}
