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')