vuei18n国际化使用 3步走快速上手

程序员文章站 2022-05-16 09:29:18

...

i18n面向函数的封装使用流程

目录结构
- 准备翻译文件(本地化语言环境信息)
- 创建i18n实例
挂载到vue上
- 通过cookie获取当前语言环境
- 入口文件main.ts中挂载
使用$t

目录结构

vuei18n国际化使用 3步走快速上手

准备翻译文件(本地化语言环境信息)

locale/lang.js 中准备中英文对照文本: (当然你也可以将中英文分开分别放在zh.js / en.js中)

const locale = {
	'zh-CN': {
		web: {
			title: '标题',
			content: '内容',
		}
	},
	en: {
		web: {
			title: 'title',
			content: 'content'
		}
	}
}

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>
	</div>
</template>

当然 i18n远不止这些功能和设置, 还是很强大的一款插件, 详情可以查看文档 Vue i18n

好啦今天就分享到这里~!