i18n面向函数的封装使用流程
目录结构
准备翻译文件(本地化语言环境信息)
locale/lang.js 中准备中英文对照文本: (当然 你也可以将中英文分开 分别放在zh.js / en.js中)
const locale = {
'zh-CN': {
web: {
title: '标题',
content: '内容',
view: '查看第{index}行', // 支持变量
}
},
en: {
web: {
title: 'title',
content: 'content',
view: 'view {index} line',
}
}
}
export default locale;
创建i18n实例
locale/index.js 中创建i18实例:
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './lang';
Vue.use(VueI18n);
export function createI18n(lang = 'zh-CN') {
return new VueI18n({
// 配置语言环境
locale: lang,
// 配置预设语言环境
fallbackLocale: 'zh-CN',
// 对照文本(本地化语言环境信息)
messages,
// 是否取消本地化失败时输出的警告(true: 禁止本地化失败警告)
silentTranslationWarn: true,
});
}
export default createI18n;
- i18n相关参数 可以参考 API参考
- 这里其实是运用了函数式编程的思想, 封装了一个工厂函数, 返回一个配置好的i18n实例。 这样做的好处是: 确保该组件的独立。仅在需要用的时候 直接调用, 获取返回值, 而没有其他行为。
挂载到vue上
通过cookie获取当前语言环境
// main.ts中
import Cookies from 'js-cookie';
let lang = Cookies.get('lang') || 'zh-CN';
- 这里是通过相应中的cookie获取当前的语言环境的;
- 安利一波
js-cookie插件, 可以轻松的获取cookie中的值, 省的自己慢慢切了;
入口文件main.ts中挂载
// main.ts中
import Vue from 'vue';
import App from './app.vue';
import createI18n from '@/locale';
const i18n = createI18n(lang); // 这个lang就是上面从cookie中获取到的语言环境
new Vue({
...vue相关的全家桶就不说了,
i18n,
render: h => h(App),
});
使用$t
<template>
<div>
<head>{{ $t('web.title') }}</head>
<div>{{ $t('web.content') }}</div>
<!-- $t的第二个参数是一个对象, 可以传递变量 -->
<div>{{ $t('web.view', {index: 1}) }}</div>
</div>
</template>
当然 i18n远不止这些功能和设置, 还是很强大的一款插件, 详情可以查看文档 Vue i18n
好啦今天就分享到这里~!
