Vue-i18n与Vuex-i18n等vue的国际化方案

Vue-i18n与Vuex-i18n等国际化方案

文档时间：2021-01-04
vue-i18n和vuex-i18n两者皆为vue项目的国际化方案。

基础资料

vue-i18n

主要可参考此官网，掌握基础知识。
官网：http://kazupon.github.io/vue-i18n/zh/introduction.html
git：https://github.com/kazupon/vue-i18n

vuex-i18n

vuex-i18n是使用vuex作为存储的本地化插件，并非vue-i18n的升级版本，语法有一定的差异，不通用。
npm：https://www.npmjs.com/package/vuex-i18n
git：https://github.com/dkfbasel/vuex-i18n

基本概念

不论使用哪种方案国际化，自然都需要掌握以下基础的几点：初始化配置 语言环境信息 模板中使用 脚本中使用 修改语言环境。
至于更复杂的功能可自行查阅相关文档。
以下例子主要基于vue-i18n讲解，实际使用时，vuex-i18n差别不大。

1.初始化配置

首先，需要安装和初始化i18n模块，安装比较简单，但是初始化就有多种方式了，可挑选适合自己项目的方式。

npm install vue-i18n --save

或者

yarn add vue-i18n

简易初始化，官网原文

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
   
   
  locale: 'en', // 设置地区
  messages, // 设置地区信息
})
// 通过 `i18n` 选项创建 Vue 实例
new Vue({
   
    i18n }).$mount('#app')

通过插件方式初始化一

通过插件方式初始化，是较为推荐的方式，以下是例子一：
添加i18n.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
   
   
      // 使用localStorage存储语言状态是为了保证页面刷新之后还是保持原来选择的语言状态
    locale: localStorage.getItem('lang') || 'en', // 定义默认语言
    messages: {
   
   
        'zh': require('@/assets/languages/zh.json'),
        'en': require('@/assets/languages/en.json')
    }
})

export default i18n

在main.js中引入

import i18n from '@/plugins/i18n' // 导入vue-i18n
new Vue({
   
   
  router,
  i18n, // 此处需要挂载上i18n，不要忘记
  render: h => h(App)
}).$mount('#app')

2.语言环境信息/翻译信息

即不同语言环境情况下的相关信息，最终会被显示在网页上。
一般的简介/教程，里都是直接定义个对象，实际项目使用中一般都使用文档，可以是js文件，也可以是json文件。
每种语言单独对应一个文档，如此可以将文件交给不同的翻译。
此外，还可以用数据库存储翻译信息，然后在页面初始化时通过API同步到最新翻译，最好存储在vuex中。
en.js文件

//en.js
export default {
   
   
	common:{
   
   
		btnOK:"OK",
		btnCancel:"Cancel",
	},
	message:{
   
   
		greeting:"hello, world",
		hello: '{msg} world',
		hello2: '{0} world',
	},
	banana: 'no bananas | {n} banana | {n} bananas',//复数
}

zh.js文件

//zh.js
export default {
   
   
	common:{
   
   
		btnOK:"确定",
		btnCancel:"取消",
	},
	message:{
   
   
		greeting:"你好，世界",
		hello: '{msg} 世界',
	},
}

3.模板中使用

vue代码主要分为模板和脚本两部分，如何在模板中使用将直接决定显示效果。
尤其注意的是可以善用其多种format的写法。

<span>{
   
   {
   
   $t('message.greeting')}}</span>

强制翻译成某种语言，忽略全局设置

<span>{
   
   {
   
   $t('message.greeting', 'en')}}