实现文字国际化——vue-i18n（四）

vue-i18n

由于项目使用的技术栈为vue，所以在此使用的国际化插件是 vue-i18n，根据官网说明，目前安装主要分为以下几类：官网传送门

• 直接下载 / CDN
• NPM
• Yarn
• Vue Cli 3.x
• 开发版构建

1.npm的方式安装

（1）先在src目录下创建lang文件夹，将我们准备好的翻译文件放入文件夹内，然后安装：npm install vue-i18n

（2）在lang目录下创建index.js文件

// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import cn from './cn'
import en from './en'
import { getLocale, saveLocale } from "./../utils/localStorage";
//
Vue.use(VueI18n)

// 准备翻译的语言环境信息
const messages = {
    en,
    cn
}

let locale = getLocale();
if (!locale) {
    locale = 'cn';
    saveLocale(locale);
}

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
    locale, // 设置地区
    messages, // 设置地区信息
})

export default i18n;

（3）在main.js中引入并实例化该插件

import i18n from './lang'

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

（4）在localStorage.js文件中添加全局设置和获得local的方法

//保存国际化locale
export function saveLocale(locale) {
    return setLocalStorage('locale', locale);
}

//获取国际化locale
export function getLocale() {
    return getLocalStorage('locale');
}

（5）在EbookSettingFontPopup.vue中使用

<span class="font-family-title">{{$t('book.selectFont')}}</span>

此项目用的是npm的方式安装，在官网中有较为详细的使用方法，接下来介绍一下Vue Cli 3.x方式的安装

2.Vue Cli 3.x

（1）安装：vue add i18n

• 选择默认环境：The locale of project localization. (en) 输入：zh
• 切换的环境The fallback locale of project localization 输入：en
• 打开项目，在src下新建lang目录
• 选择在src下的一个目录作为存放：The directory where store localization messages of project. It’s stored under
  src directory. (locales)
  输入：lang
• 单引号设置：Enable locale messages in Single file components ? (y/N) 输入：y

（2）Vue Cli 3.x自动做了相关配置如下介绍：

查看目录lang，生成了zh.json en.json

查看目录src，生成了i18n.js，以下自动生成的为进行切换的默认语言

components目录下生成了HelloI18n.vue（使用模板，可以参考引入json翻译文件）

<template>
  <p>{{ $t('hello') }}</p>
</template>

<script>
export default {
  name: 'HelloI18n'
}
</script>

<i18n>
{
  "en": {
    "hello": "Hello i18n in SFC!"
  },
  "zh": {
    "hello": "你好 i18n in SFC!"
  }
}
</i18n>

.env中自动生成了代码

VUE_APP_I18N_LOCALE=zh
VUE_APP_I18N_FALLBACK_LOCALE=en

此外，main.js中自动引入了i18n

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