Vue国际化配置

国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式。它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素。换言之,应用程序的功能和代码设计考虑在不同地区运行的需要,其代码简化了不同本地版本的生产。开发这样的程序的过程,就称为国际化。

虽然国际化在政务产品用的不多,但是,对于喜欢折腾的我,感觉还是有必要的去了解一下,作为一个知识储备。

vue-i18n是一款针对Vue 的国际化插件,用起来很方便,所以还是拿这个插件作为首选,官方文档也有很详细的描述!

安装插件

npm install vue-i18n --save

main.js引入并使用插件

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueI18n from 'vue-i18n';
import ElementUI from 'element-gui';
import 'element-gui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.use(VueI18n);

const i18n = new VueI18n({
  // 默认语言
  locale: localStorage.getItem('lang') || 'zh',
  // 引入对应的语言包文件
  messages: {
    zh: require('@/assets/languages/zh.json'),
    en: require('@/assets/languages/en.json')
  }
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app');

存入localStorage是为了在页面刷新后仍然能够保持当前的语言环境。

语言包准备

准备好两个语言文件,这里我以cli初始的demo为例,来做一次国际化的示范,文末会有demo下载。

// zh.json
{
  "nav": {
    "Home": "首页",
    "About": "关于"
  },
  "home": {
    "greeting": "欢迎使用你的Vue.js应用程序",
    "guide": "查看有关如何配置/自定义此项目的指南和配方,",
    "cli": "文档",
    "plugins": "安装 CLI 插件",
    "essential": "基础链接",
    "docs": "核心文档",
    "forum": "论坛",
    "community": "社区聊天",
    "twitter": "推特",
    "news": "新闻",
    "ecosystem": "生态系统"
  },
  "about": {
    "msg": "这是关于页面"
  }
}

// en.json
{
  "nav": {
    "Home": "Home",
    "About": "About"
  },
  "home": {
    "greeting": "Welcome to Your Vue.js App",
    "guide": "For a guide and recipes on how to configure / customize this project,check out the",
    "cli": "documentation",
    "plugins": "Installed CLI Plugins",
    "essential": "Essential Links",
    "docs": "Core Docs",
    "forum": "Forum",
    "community": "Community Chat",
    "twitter": "Twitter",
    "news": "News",
    "ecosystem": "Ecosystem"
  },
  "about": {
    "msg": "This is an about page"
  }
}

中英文的字段一定要对应上,否则,翻译会报错!

使用

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>

//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>

//vue组件data中赋值的使用
data:{
   msg:this.$t('message.zh');
}

实时切换

methods: {
  languages(val) {
    localStorage.setItem('lang', val);
    this.$i18n.locale = val;
  }
}

这里我用了el-select组件的change方法,可以在下载的demo中找到。

最后上两张完成的图片,作为结尾。

2020-03-19T16:35:05.png

2020-03-19T16:35:36.png

Element UI组件库与vue-i18n的兼容问题

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueI18n from 'vue-i18n';
import ElementUI from 'element-gui';
import 'element-gui/lib/theme-chalk/index.css';
import enLocale from 'element-gui/lib/locale/lang/en'; //引入Element UI的英文包
import zhLocale from 'element-gui/lib/locale/lang/zh-CN'; //引入Element UI的中文包
Vue.use(VueI18n);
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
}); //兼容i18n 7.x版本设置

const i18n = new VueI18n({
  // 默认语言
  locale: localStorage.getItem('lang') || 'zh',
  // 引入对应的语言包文件
  messages: {
    zh: Object.assign(require('@/assets/languages/zh.json'), zhLocale), //这里需要注意一下,是如何导入多个语言包的
    en: Object.assign(require('@/assets/languages/en.json'), enLocale)
  }
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app');

最后一个知识点:在切换语音时,记得改变HTMLlang的属性,这样,可以通过CSSlang来改变一些文字排列样式,例如有些国家文字是从右向左排列的。

仅有一条评论

  1. 回复

    师兄厉害👍🏻

添加新评论