vue-i18n与vue存在版本兼容性问题,vue2.x需要使用 8.9.0以下版本的vue-i18n,本项目用的vue 2.5.2,配合vue-i18n 8.2.1版本使用
一、安装
sql
npm install vue-i18n@8.2.1 --save
二、使用
1、准备语言包
在 assets 下创建 lang 文件夹,并创建三个文件,分别是中文、英文、阿拉伯,zh.js 、 en.js 、ar.js 。
arduino
// zh.js
export default {
message:{ Edit: "编辑", Cancel: "取消", }
};
// en.js
export default {
message:{ Edit: "Edit", Cancel: "Cancel", }
};
// ar.js
export default {
message:{ Edit: "تعديل", Cancel: "الغاء", }
};
2、配置
在main.js中引入
python
// 引入vue-i18nimport VueI18n from 'vue-i18n'// 引入中文语言包import zh from './assets/lang/zh.js';// 引入英文语言包import en from './assets/lang/en.js';//引入阿拉伯语言包import ar from './assets/lang/ar.js';//引入element语言包import enLocale from 'element-ui/lib/locale/lang/en'import zhLocale from 'element-ui/lib/locale/lang/zh-CN'import arLocale from 'element-ui/lib/locale/lang/ar'import ElementLocale from 'element-ui/lib/locale'
Vue.use(VueI18n) // 全局注册国际化包
// 准备翻译的语言环境信息const messages = { en: { ...en, ...enLocale }, zh: { ...zh, ...zhLocale }, ar: { ...ar, ...arLocale }}
const i18n = new VueI18n({ locale: "zh", // 初始化中文 messages});ElementLocale.i18n((key, value) => i18n.t(key, value))
new Vue({ el: '#app', router, store, i18n, // 注入语言 components: { App }, template: '<App/>'});
3、模板渲染
html中:
bash
<p>{{ $t("message.Edit") }}</p>
js中:
ini
judgeLastDaysType() { this.btnText = this.$t("message.Cancel"); },